CSS网格:位置项

最后，我们有place-items: center for CSS Grid以使它更容易。

HTML

<div class="parent">
  <div class="to-center"></div>
</div>

CSS

.parent {
  display: grid;
  place-items: center;
}

输出:

超文本标记语言 身体{ 高度:100%; ｝ .container { 显示:网格; 名:中心; 高度:100%; ｝ .center { 背景:# 5 f85db; 颜色:# fff; 粗细:大胆的; 字体类型:大河马字体; 填充:10 px; ｝ < div class = "容器" > <div class="center" contenteditable>我总是超级集中在我的父母</div> < / div >

运行此代码片段并查看垂直和水平对齐的div。

超文本标记语言 的身体, .container { 高度:100%; 宽度:100%; ｝ .container { 显示:flex; 对齐项目:中心; justify-content:中心; ｝ .mydiv { 宽度:80 px; ｝ < div class = "容器" > <div class="mydiv">h & v aligned</div> < / div >

方法1 -转换translateX/translateY:

这里/全屏示例

在受支持的浏览器中(大多数)，您可以使用top: 50%/left: 50%结合translateX(-50%) translateY(-50%)动态地将元素垂直/水平居中。

.container { 位置:绝对的; 上图:50%; 左:50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); translateX(-50%) translateY(-50%); ｝ < div class = "容器" > 我在垂直/水平居中!< / span > < / div >

方法2 - Flexbox方法:

这里/全屏示例

在受支持的浏览器中，将目标元素的显示设置为flex，并使用align-items: center用于垂直居中，使用justify-content: center用于水平居中。不要忘记为额外的浏览器支持添加供应商前缀(参见示例)。记住，父容器也需要高度(在本例中为100%)。

Html, body， .container { 高度:100%; ｝ .container { 显示:-webkit-flexbox; 显示:-ms-flexbox; 显示:-webkit-flex; 显示:flex; -webkit-flex-align:中心; -ms-flex-align:中心; -webkit-align-items:中心; 对齐项目:中心; justify-content:中心; ｝ < div class = "容器" > 我在垂直/水平居中!< / span > < / div >

方法3 - table-cell/vertical-align:中间:

这里/全屏示例

在某些情况下，您需要确保html/body元素的高度设置为100%。

对于垂直对齐，设置父元素的宽度/高度为100%，并添加display: table。然后对于子元素，将显示更改为table-cell并添加vertical-align: middle。

对于水平居中，您可以添加text-align: center使文本和任何其他内联子元素居中。或者，您可以使用margin: 0 auto，假设元素是块级别的。

Html, body { 高度:100%; ｝ .parent { 宽度:100%; 高度:100%; 显示:表; text-align:中心; ｝ .parent > .child { 显示:表格单元; vertical-align:中间; ｝ <类节=“父”> <div class="child">我是垂直/水平居中!< / div > < / >节

方法4 -绝对定位50%从顶部位移:

这里/全屏示例

这种方法假定文本具有已知的高度——在本例中为18px。只需要将元素定位在距离顶部50%的位置，相对于父元素。使用一个负的margin-top值，即元素已知高度的一半，在本例中为- -9px。

Html, body， .container { 高度:100%; ｝ .container { 位置:相对; text-align:中心; ｝ .container > p { 位置:绝对的; 上图:50%; 左:0; 右:0; margin-top: 9 px; ｝ < div class = "容器" > <p>我是垂直/水平居中!< / p > < / div >

方法5 -行高法(最不灵活-不建议):

例子

在某些情况下，父元素将具有固定的高度。对于垂直居中，您所要做的就是在子元素上设置一个行高值，该值等于父元素的固定高度。

虽然这种解决方案在某些情况下是有效的，但值得注意的是，当有多行文本时，它就不起作用了——就像这样。

.parent { 身高:200 px; 宽度:400 px; 背景:浅灰色; text-align:中心; ｝ .parent > .child { 行高:200 px; ｝ < div class = "父" > <span class="child">我在垂直/水平居中!< / span > < / div >

这是一个相关的问题，人们可能会在搜索时来到这个页面:当我想要居中一个div为“等待..”100px方形动画gif，我使用:

.centreDiv {
    position: absolute;
    top:     -moz-calc(50vh - 50px);
    top:  -webkit-calc(50vh - 50px);
    top:          calc(50vh - 50px);
    left:    -moz-calc(50vw - 50px);
    left: -webkit-calc(50vw - 50px);
    left:         calc(50vw - 50px);
    z-index: 1000; /* whatever is required */
}

.align { display: flex; width: 400px; height: 400px; border: solid 1px black; align-items: center; justify-content: space-around; } .align div:first-child { width: 20px; height: 20px; background-color: red; position: absolute; } .align div { width: 20px; height: 20px; background-color: blue; } <div class='align'> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

第一个子将在中心垂直和水平对齐

如果它只是关于文本对齐，它很简单。就用这个吧:

vertical-align: middle; /* vertical centering*/
text-align: center; /* horizontal centering*/

不需要父样式。

在某些情况下，当父类有一些样式属性时，它可能会影响子类，这将无法正常工作。