导航菜单
首页 >  » 正文

CSS 居中布局方法

水平居中元素

通用方法,元素的宽高未知

方式一:CSS3 transform

  1. .parent { position: relative;}
  2. .child {
  3. position: absolute;
  4. left: 50%;
  5. transform: translateX(-50%);
  6. }

方式二:Flex 布局

  1. .parent {
  2. display: flex;
  3. justify-content: center;
  4. }

适用于子元素为浮动,绝对定位,内联元素,均可水平居中。

居中的元素为常规文档流中的内联元素(display: inline)

常见的内联元素有:span, a, img, input, label 等等

  1. .parent { text-align: center;}

此方法同样适用于 display: inline-block 的元素。

居中的元素为常规文档流中的块元素(display: block)

常见的块元素:div, h1~h6, table, p, ul, li 等等

方式一:设置 margin

  1. .parent {width: 100%;}
  2. .child {
  3. width: 600px;
  4. height: 50px;
  5. margin: 0 auto;
  6. background: #999;
  7. }

此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效。

方式二:修改为 inline-block 属性

  1. .parent { text-align: center;}
  2. .child { display: inline-block;}

居中的元素为浮动元素

  1. .child {
  2. width: 100px;
  3. float: left;
  4. position: relative;
  5. left: 50%;
  6. margin-left: -50px;
  7. }

居中的元素为绝对定位元素

方式一:

  1. .parent { position: relative;}
  2. .child {
  3. position: absolute;
  4. width: 100px;
  5. left: 50%;
  6. margin-left: -50px;
  7. }

方式二:

  1. .parent { position: relative;}
  2. .child {
  3. position: absolute;
  4. width: 100px;
  5. left: 0;
  6. right: 0;
  7. margin: 0 auto;
  8. }

垂直居中元素

通用方法,元素的宽高未知

方式一:CSS3 transform

  1. .parent {position: relative;}
  2. .child {
  3. position: absolute;
  4. top: 50%;
  5. transform: translateY(-50%);
  6. }

方式二:Flex 布局

  1. .parent {
  2. display: flex;
  3. align-items: center;
  4. }

适用于子元素为浮动,绝对定位,内联元素,均可垂直居中。

居中元素为单行文本

  1. .text {
  2. line-height: 200px;
  3. height: 200px;
  4. }

把文字的 line-height 设为文字父容器的高度,适用于只有一行文字的情况。

已知元素宽高

方式一:

  1. .parent {position: relative;}
  2. .child{
  3. position: absolute;
  4. top: 50%;
  5. height: 100px;
  6. margin-top: -50px;
  7. }

方式二:

  1. .parent {position: relative;}
  2. .child{
  3. position: absolute;
  4. top: 0;
  5. bottom: 0;
  6. height: 100px;
  7. margin: auto 0;
  8. }

绝对居中定位

  1. div {
  2. width: 100px;
  3. height: 100px;
  4. margin: auto;
  5. position: fixed;
  6. //absolute is ok
  7. top: 0;
  8. right: 0;
  9. bottom: 0;
  10. left: 0;
  11. }

优点:

不仅可以实现在正中间,还可以在正左方,正右方元素的宽高支持百分比 % 属性值和 min-/max- 属性可以封装为一个公共类,可做弹出层浏览器支持性好

负边距居中

  1. .child {
  2. width: 100px;
  3. height: 100px;
  4. position: absolute;
  5. top: 50%;
  6. left: 50%;
  7. margin-left: -50px;
  8. margin-top: -50px;
  9. }

特点:

  1. 良好的跨浏览器特性,兼容 IE6 – IE7
  2. 灵活性差,不能自适应,宽高不支持百分比尺寸和 min-/max- 属性

Transform 定位

  1. .child {
  2. width: 100px;
  3. height: 100px;
  4. position: absolute;
  5. top: 50%;
  6. left: 50%;
  7. transform: translate(-50%, -50%);
  8. }

特点:

  1. 内容可自适应,可以封装为一个公共类,可做弹出层
  2. 可能干扰其他 transform 效果

Flexbox 布局

  1. .parent {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. }

这是 CSS 布局未来的趋势。Flexbox 是 CSS3 新增属性,设计初衷是为了解决像垂直居中这样的常见布局问题。

table-cell 居中

  1. .parent {
  2. display: table-cell;
  3. vertical-align: middle;
  4. text-align: center;
  5. width: 200px;
  6. height: 200px;
  7. border: 1px solid red;
  8. }
  9. .child {
  10. width: 100px;
  11. height: 100px;
  12. display: inline-block;
  13. background-color: #03f;
  14. }

适用于子元素 display 为 inline-block, inline 类型的元素,需要已知父元素的宽高,且父元素的宽高不能设为百分比数。

font-size 配合 vertical-align 实现垂直居中

  1. .parent {
  2. font-size: 175.4px;
  3. height: 200px;
  4. text-align: center;
  5. }
  6. .child {
  7. vertical-align: middle;
  8. display: inline-block;
  9. font-size: 12px;
  10. width: 50px;
  11. height: 50px;
  12. background-color: #00f;
  13. }

该方法的要点是给父元素设一个合适的 font-size 的值,这个值的取值为该父元素的高度除以 1.14 得到的值,并且子元素必须 是一个 inline 或 inline-block 元素,需要加上 vertical-align: middle 属性。使用这种方法,子元素的宽度或高度都不必知道。

文本内容居中

  1. text {
  2. height: 100px;
  3. line-height: 100px;
  4. text-align: center;
  5. }
0.255180s