居中
居中是布局中最常遇到的问题，情景不同实现居中的方法也不同，下面分别介绍不同场景下居中的实现方式。另外最常见的水平居中，使用 margin: 0 auto; 实现，这个就不再详细介绍了。点击查看所有居中测试
元素宽高固定情况
可使用 margin 结合 top left 实现。
代码：
.box{
position: relative;
width: 200px;
height: 100px;
background-color: #fb3;
}
.item{
width: 50px;
height: 50px;
background-color: #58a;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
}
效果图：
固定宽高居中.png
元素宽高不固定情况
使用 transform 结合 top left 实现。
注意：translate 必须提供两个值，如果值提供一个值，则该值只作用域X轴，Y轴偏移量为0.
代码：
.box{
position: relative;
width: 200px;
height: 100px;
background-color: #fb3;
}
.item{
background-color: #58a;
color: white;
font-size: 12px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
dom结构：
<div class="box">
<div class="item">宽高由元素撑开</div>
</div>
效果图：
transform实现居中.png
使用 flex 布局
代码：
.box{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-items: center;
width: 200px;
height: 100px;
background-color: #fb3;
}
.item{
background-color: #58a;
color: white;
font-size: 12px;
}
使用 table-cell 属性
注意：三层结构，父级需指定 display: table; 属性； 二层元素需设置 display: table-cell; vertical-align: middle;；最后一层自元素需要设置宽度以及借助 margin: 0 auto; 实现。
代码：
.box{
display: table;
width: 200px;
height: 100px;
background-color: #fb3;
}
.item-box{
display: table-cell;
vertical-align: middle;
}
.item{
margin: 0 auto;
width: 100px;
}
dom结构：
<div class="box">
<div class="item-box">
<div class="item">宽高由元素撑开</div>
</div>
</div>
文字处理
文字处理是页面排版中常遇到的问题，而最常见的则是文字换行、文字溢出省略处理以及文字居中。点击查看所有文字处理测试
文字换行
一般情况，都会采用 word-break：break-all; 或者 word-wrap：break-word; 进行文字换行，那么这两个属性到底有什么区别呢？
看图：
不同方式对比.png
第一行采用的是 word-wrap：break-word; 的方式进行换行处理， 第二行采用的是 word-break：break-all; 。很明显这两种方式的区别是：
word-wrap 先对行尾的单词进行换行，如果换行后单词的长度仍大于盒子的长度，则单词内换行；
word-break 直接进行单词内换行
在平常的网页排版中，可根据需求选择换行方式。
文字居中
对于单行文字来说，水平方向上的居中一般采用 text-align: center; 的方式，垂直方向上的居中一般借助于 line-height 实现。对于多行文本，则借助于盒子的居中来实现【盒子的居中见文章开头部分】。
文字溢出省略处理
单行文本
分三步，1 设置不换行， 2 设置溢出部分隐藏， 3 文本溢出时元素的状态
代码：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
如：
单行文本溢出处理.png
多行文本
css并没有很好的解决方法来实现多行文本的溢出处理，也可以使用js的方式实现，这里不作说明。
下面展示的方法只适用于WebKit浏览器及移动端【且三个属性必须结合一起使用】：
display: -webkit-box; /*指定将该对象作为弹性伸缩盒子模型*/
-webkit-line-clamp: 3; /*指定行数*/
-webkit-box-orient: vertical; /*指定排列方式*/
overflow: hidden;
text-overflow: ellipsis;
如：
多行文本溢出处理.png
网友评论