黑马程序员技术交流社区

标题: 【上海校区】css居中的方法 [打印本页]

---

作者: web前端田达    时间: 2018-4-11 22:02
标题: 【上海校区】css居中的方法


居中在 CSS 中用的也比较常见，总结几种自己比较熟悉的居中的写法。当然，肯定还有更多更不错的写法，对于文中不足的地方也欢迎指正。
假设现在给出这种场景：
<div class="parent">
  <div class="child">
    黑马学院
  </div>
</div>
其中在 class='child' 这个 div 中的内容长度是不一定的，现在需要实现这个 div 的居中。


水平居中1.1 display: inline-block在块级父容器中让行内元素或者类行内元素居中，只需使用 text-align: center，
这种方法可以让 inline/inline-block/inline-table/inline/flex居中。
.parent{
  text-align:center
}
.child{
  display:inline-block;
  /*子元素文字会继承居中，因此要在上面写上向左边居中*/
  text-align: left;
}


有多个 child div 的时候如果设置 display: inline-block 的时候需要注意每个 div 之间会有缝隙，这不是什么 bug ，特性就是如此。。

1.2 display:tabletable 元素的宽度也是跟着内容走，居中的时候加上 margin 即可。
如果不设置成table,设置成别的块级元素也可以，但是要强调设置宽度width，不然会拉伸成父元素的宽度。(注意加上 width 这种方法拓展性不好，如果 child div 里面的内容很长的话可能超过设置的 width 的宽度)
.child{
  display:table;  margin:0 auto;
}
1.3 position: absolute absolute 元素的宽度默认也是由内容决定
这种方法的优点是居中的元素不会对其他元素产生影响 脱离正常流，需要注意的是如果定位为绝对定位的话，父元素一定要进行定位设置。
.parent {
  position:relative;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}1.4 dispaly: flex  只兼容IE10+
.parent {
  display:flex;  justify-content:center;
}
.child {
  margin:0 auto;
}2.垂直居中2.1 display: table-cell 可以使高度不同的元素都垂直居中
.parent {
  display:table-cell;
  vertical-align:middle;
}2.2 position: absolute.
  .parent {
    position:relative;
  }
  .child{
    position:absolute;
    top:50%;//这里相对的百分比对象是父元素
    transform:translateY(-50%); //这里的百分比相对的是子元素
  }2.3 display: flex
  .parent {
    display:flex;  align-items:center;
  }
  /*或者*/
.child{
  margin: 0 auto;
}

css布局有各式各样的方式，只要选择自己习惯的布局，总能写出美丽的页面。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2