1 Just align:
<style>
.container{
text-align: center;
}</style><p>
<img alt="Common CSS centering discussions" >
</p><p>火星</p>The actual effect is as follows:
Mars
The problem with this is that setting a text-align attribute directly on the outermost container will cause all children to The elements will be inherited. If there is a text description below the picture title, then the text description will also be centered, as shown below:
狠的东西的东西。 This is a bad idea in itself, so other methods are used here. Since the displayed image changes and the width and height are variable, a width and height are generally set to the image explicitly. If you know the width, you can use the margin: 0 auto method. Set the left and right margin values to auto, and the browser will automatically set the left and right margin values to half of the remaining width of the container:
Mars
. The code is as follows:
<style>
figure{
width: 100px;
margin: 0 auto;
}
figcaption{
text-align: center;
}</style>
<p>
<figure>
<img alt="Common CSS centering discussions" >
<figcaption>火星</figcaption>
</figure>
</p><p>火星（Mars）是太阳系八大行星之一，天文符号是♂</p>
. It should be noted that this method does not apply to centering up and down.
Use margin: 0 auto can be said to be the most common left and right centering method, applicable not only to block elements but also to inline elements. The layout of many web pages is that the main content has a fixed width and is displayed in the center. For example, Taobao PC side:
but the main content is a fixed-width display at the same time. Vertical centering, the trouble is vertical centering. However, there is a more general method for vertical centering, which is to use the vertical centering of table-cell. The method is to add the following attributes to the parent container:
.container{
display: table-cell;
vertical-align: middle;
}
The effect is as follows:
The disadvantage of Mars
using Table-Cell is that the Magin attribute of the container is invalid, because Margin does not do not. Suitable for table layout. So if you want to center the container, using margin: 0 auto will not work. The solution is to add another container to the outer layer of the container, and then let the container display as block margin: 0 auto.
There is a time when this method fails, that is when the container needs to set position to absolute. Because setting position: absolute will force the display of the (non-flex) element to block. The solution is to imitate the above, add another container to the outer layer, and apply absolute to this container. The side effect is that setting the height and width of the inner container to percentages will fail (unless its position is also set to absolute). For this reason, there is a situation where display cannot be used: table-cell vertical centering.
这种场景就是需要在页面弹个框，这个框的位置需要在当前屏幕左右上下居中:
通常需要将这个框的positiion设置成absolute，这个时候table-cell就不能发挥作用了，即使你在外面再套多两层，最外层为absolute，里层为table-cell，但由于里层无法设置height为外层的100%，也就是说高度无法刚好占满整个屏幕，所以不能起作用。
解决办法是使用relative定位，设置top为50%，再设置margin-top为元素高度的负的一半。一开始设置top 50%，将弹框的起始位置放到页面中间，然后再设置margin-top为弹框高度的一半取负，这样使得弹框在页面中间位置再往上移一半自身的高度，这样就刚好在正中间了，左右居中也可类似处理：
<style>
.mask{
position: absolute; width: 100%; height: 100%;
}
.outer{
position: relative;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.container{
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}</style><p>
</p><p>
</p><p>
</p>
效果如下：
火星
这种办法的缺点是需要知道高度，无法根据内容长短自适应。所以就有了transform的方法，将margin-top一个具体的负值改成transform: translate(0, -50%)，由于translate里面的面百分比是根据元素本身的高度计算的，于是就可以达到自适应的效果。将上面outer样式改为：
.outer{
position: relative;
top: 50%;
left: 50%;
width: 200px;
transform: translate(-50%, -50%);
}这个办法十分地方便，为了提高兼容性，需要添加-ms-和-webkit-前缀，缺点是IE8不支持。
上面的两种办法：margin-top一个负值和translate -50%都有一个潜在的弊端， 就是如果设置left为50%是借助position为absolute的话，可能会导致换行：
<style>
.container{
position: relative;
}
.nav{
position:absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: 0;
}</style><p>
<figure>
<img alt="Common CSS centering discussions" >
</figure>
</p><p><span>地形</span><span>气候</span><span>运动</span></p> 效果如下：
地形气候运动
可以看到，本来应该在一行显示的p元素却换行了，这是因为在一个relative元素里面absolute定位的子元素会尽可能地不超过容器的边界，通过把行内元素换行的方式。由于设置left为50%，导致p元素超了边界，所以就换行了，即使再translate -50%但已经晚了。即使是交换下两者的位置也是一样的效果，看得出浏览器执行的顺序始终是以absolute的定位优先。所以这种方法还是有不适合的场景，主要是用于左右居中定位为absolute的的情况。
另外一个CSS3居中的办法是使用flex布局，flex布局居中十分容易和方便，只需要在父容器添加三行代码，例如上面的居中情况，可将.nav的样式改为：
.nav{
position:absolute;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}效果如下：
地形气候运动
flex布局在自适应领域的功能真的是非常强大，不过IE的兼容性不好，所以说可能的话，不要太去照顾IE了。
上面讨论的都是一些复合元素的居中，接下来分析单纯的行内元素的垂直居中。
主要是要借助vertical-align: middle。如下，有一张图片和文字：
<p> <img alt="Common CSS centering discussions" > <span>photo</span> </p>
如果不做任何处理，那么默认的垂直居中是以baseline为基准：
photo
为了让它们能够垂直居中，需要改变它们的居中方式：
.container img,
.container span{
vertical-align: middle;
}注意每个元素都需要设置，效果：
photo
如果container的高度比图片还要高：
photo
为了让中间的内容能够在container里上下居中，可以设置文字的line-height为container的高度，那么文字就上下居中了，由于照片是和文字是垂直居中的，所以照片在container里也上下居中了，代码：
.container span{
vertical-align: middle;
line-height: 150px;
}效果：
photo
这也就给了一个启示，如果需要垂直居中一个p里的比p高度小的照片，可以添加一个元素，让它的line-height等于p的高度，如下：
<style>
.container{
width: 150px;
height: 150px;
text-align: center;
}
.container img{
vertical-align: middle;
}
.container:before{
content: "";
vertical-align: middle;
line-height: 150px;
}</style><p>
<img alt="Common CSS centering discussions" ></p>或者是弄一个inline-block的元素，设置height为100%，这种的兼容性更好：
.container:before{
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}上下居中效果：
还有另外一种方法借助absolute定位和margin: auto：
.container{
position: relative;
}
.container img{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}这个方法的神奇之处在于最后的margin: auto，这种方法也适用于p，但是需要给p显式指定一个height，不然p的height会达到外层容器的100%。
如果图片比container大，这种方法就不适用了。因为有一种比较常见的场景是：照片有一边和container一样高，另外一边按照片的比例缩放，照片居中显示，超出的截断，这种应该叫“占满”（occupy）布局。这种情况，只需要把left/right/top/bottom/设成一个很大的负值即可：
.container img{
position: absolute;
left: -9999px;
top: -9999px;
right: -9999px;
bottom: -9999px;
margin: auto;
}
.container{
overflow: hidden;
}效果：
综合上面的讨论，左右居中常用text-align和margin: 0 auto，上下居中一种办法是借助table-cell，另外一种是设置top: 50%和margin-top/translate(0, -50%)结合的办法，还有就是使用flex布局，对于行内元素设置vertical-align: middle，同时借助一个高度为100%的元素达到垂直居中的效果。最后是position: absolute和margin: auto结合使用的办法。可以说没有一个方法可以100%适用，可以根据不同的情况合理结合使用。
如果上文有不妥的地方，或者读者有其它的居中方式，还请指出
更多Common CSS centering discussions相关文章请关注PHP中文网！
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
