文字垂直居中在前端开发十分普遍，最常用的方法是text-center + line-height属性来实现

<style type="text/css">
.div1 {
	width: 100px;
	height: 100px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	text-align: center;
	line-height: 100px;
}
</style>
<body>
<div class="div1">
	<span>居中</span>
</div>

缺陷：如果遇到宽度不够换行的，就会变成这样

line-height来实现垂直居中并不是那么完美，所以探索了其他方法

table和table-cell

父容器实现table表格显示，子元素 table-cell + vertical-align 垂直居中

<html>
<head>
    <style type="text/css">
        body {
            font-family: "lucida grande", sans-serif;
        }
        .div1 {
            width: 100px;
            height: 300px;
            border: 1px solid #ccc;
            display: table;
        }
        .center-text {
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="center-text">
        很长的很长的很长的很长的很长的
    </div>
</div>
</body>
</html>

flex布局

flex可以很轻松的垂直居中元素，文字，在父元素设置 justify-content + align-items 属性

.div4 {
  display: flex;
  justify-content: center;
  align-items: center;
}

transform

css3的transform可以变换x、y轴的坐标，在居中的元素使用绝对定位再加上自身的 translateX + translateY 来改变x、y的坐标

<html>
<head>
    <style type="text/css">
        .div1 {
            position: relative;
            width: 100px;
            height: 300px;
            border: 1px solid #ccc;
            display: table;
        }
        span {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
    </style>
</head>
<body>
<div class="div1">
    <span>很长的很长的很长的很长的很长的</span>
</div>
</body>
</html>

 

本文为原创，未经授权，禁止任何媒体或个人自媒体转载
商业侵权必究，如需授权请联系[email protected]
标签： css3