css 垂直居中和水平居中

最新推荐文章于 2022-09-08 14:47:57 发布

_dalianmiao

最新推荐文章于 2022-09-08 14:47:57 发布

阅读量221

点赞数

CC 4.0 BY-SA版权

分类专栏：前端项目经验

本文链接：https://blog.youkuaiyun.com/hani_wen/article/details/88352920

前端项目经验专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了CSS中实现水平和垂直居中的多种方法，包括利用margin、position、flex及transform等属性，适用于不同场景和需求。

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

一、水平居中

行内元素inline、inline-block
行内元素水平居中，直接在父盒子中设置text-align:center
块元素居中

已知盒子的宽度：
方法一：  margin : 0 auto;   // 最简单实现
方法二：  position: absolute; left： 50%; margin-left: -(宽度值/2);
 // 绝对定位，左侧盒子的一般的宽度

未知盒子的宽度：
方法三：dispaly: inlint-block;
父元素设置： text-align: center;
方法四： 绝对定位
在知道盒子宽度的时候，我们可以margin-left盒子宽度的一半，在不知道盒子宽度的情况下也可以水平居中
.pagination {
  position: relative;
}
.pagination ul {
  position: absolute;
  left: 50%;
}
.pagination li {
  line-height: 25px;
  margin: 0 5px;
 float: left;
  position: relative;    /*注意，这里不能是absolute*/
  right: 50%;
}
解释如图：

在这里插入图片描述

方法五：CSS3的flex实现水平居中
父盒子设置
 #container{
    justify-content:center;
    display:flex;
 }

二、垂直居中

行内元素inline、inline-block
行内元素垂直居中，直接在父盒子中设置display:table-cell;vertical-align:middle
块元素居中

已知盒子的高度:
方法一： 绝对定位
 position: absolute; top： 50%; margin-top: -(高度值/2);

不知盒子的高度：
方法二： 绝对定位与margin
父元素  position: relative
子元素 
   position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
方法三：Css3显威力（很通用，无需设置宽高）
父元素  position: relative
子元素  
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  // 移动
 方法四：flex布局
    父元素设置
    display:flex;
    align-items: center;

总结：CSS3的transform和flex固然好用，但在项目的实际运用中必须考虑兼容问题
某些浏览器仍需使用前缀写法: display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀