居中

最新推荐文章于 2023-12-09 12:00:32 发布

sunfx0721

最新推荐文章于 2023-12-09 12:00:32 发布

阅读量108

点赞数 1

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/sunfx0721/article/details/79928552

本文介绍了如何使用CSS实现元素的水平和垂直居中，包括利用text-align、margin、flexbox等属性进行内联元素和块级元素的居中对齐。同时也提供了基于绝对定位和transform属性来精确控制元素位置的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

水平居中

内联元素

text-align:center;

块级元素

margin:0 auto;

两个及以上元素需要在一行显示

parent element { 
    text-align: center; 
}
element { 
    display: inline-block; 
}

垂直居中

元素高度确定

parent element { display: table; }
element { display: table-cell; vertical-align: middle; }

使用flexbox

parent element {  
  display: flex; 
  align-items: center;
  justify-content: center;
}

水平垂直居中

我们知道，左右外边距 auto 可以让块元素水平居中，但是需要注意的是，垂直方向上的上下外边距设置为 auto 是不可以的让块状元素垂直居中的。一是因为 auto 的作用是自动分配剩余空间，块状元素在垂直方向上默认是不会自动填充父元素的 height 的。二是因为，正常流中的一个块元素的上下外边距设置为 auto 的化，它会自动设置为 0 。
因此要想让元素垂直水平居中，就要让元素在上下方向上都自动填充，并利用绝对定位的拉伸就可以做到。
原理是：通过absolute化子元素，设置上下左右为0；让其具有自动填充性，然后通过设置宽度，然后就有了剩余空间，然后再使用 margin:auto, 分配剩余空间。

position:absolute
top:0;right:0;left:0;bottom:0;
margin:atuo;
width: 50%;
height: 50%;

使用flexbox

parent element {  
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

parent element {     position: relative; 
}
element { 
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
}