在实际工作中，经常会遇到容器居中问题，而CSS容器水平和垂直居中的方法，网络上已经有很多相关文章，在这里，我也对工作中用到的一些居中方法进行了总结，并加入了一些自己的观点，如有错误欢迎指正。

假设有如下html和样式，我们需要将inner容器居中：

一、绝对定位：首先让outer相对定位relative，其次让inner绝对定位absolute，同时left和top都是50%，此时inner的左上角在outer的正中间，所以，只要让它margin-left和margin-top都是负的自身高度的一半即可：

前端页面开发中关于内容居中的需求应用概率很大，自己搜集一些资料和总结关于css里的几种居中效果实现

第一

常用text-align:center

先将子元素将块级元素改为行内元素，即display:inline-block

把一个div里面的文字居中，大家都很清楚，不就是写css，text-align:center;和line-height:盒子的高度；

<div id="box">我要居中</div>

#box{

width:200px;

height:200px;

这是一道面试必考题，很多面试官都喜欢问这个问题

要实现上图的效果看似很简单，实则暗藏玄机，下面总结了一下CSS实现水平垂直居中的方式大概有下面这些，come

仅居中元素定宽高适用

• absolute + 负margin
• absolute + margin auto

华哥最近调整自己的一个网站时，觉得在发布文章时，手动把图片居中，实在有些麻烦。能不能让文章内容中的图片自动居中呢？是否可以通过样式控制表来实现？

网上找了下答案，似乎有些过于复杂了。自己动手实践吧。

首先要调整的，是让图片独占一行空间。

补充CSS知识点：

一、对于行内元素：

text-align:center;

二、对于确定宽度的块级元素：

（1）margin和width实现水平居中

常用(前提：已设置width值)：

内容导读

当父div的行高等于自身高度时，内部的行内元素会上下居中显示。行内块没有固定高度时也会上下居中显示。所以需要对父div的 line-height 进行调整。利用定位属性（top、left、right、bottom）百分比的模式。若为100%，则代表偏移的长度为父div的高度（宽度）的100%。定位属性top和bottom（或是left和right）值分别设置为0，但子div有固定高度（宽度），并不能达到上下（左右）间距为0，此时给子div设置 margin:auto 会使它居中显示。