css文字垂直居中

2016-05-30

文字垂直居中在前端开发十分普遍,最常用的方法是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>

 

标签: css3

如果本文对您有所帮助,可以扫下面二维码给我支持,您的鼓励是我前进的动力!

微信

支付宝

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论
相关推荐
真机h5页面调试工具weinre
weinre是什么 weinre是网页远程审查工具,可以在pc端调试真机的浏览器页面,但是不能用来调试js wein...
css高性能动画
浏览器渲染流程 要优化动画性能,首先要了解浏览器是如何进行元素渲染的,浏览器的渲染流程有以下三步 计算元素的样式...
小程序滑动切换tab选项卡
终于入坑小程序了,最近开发小程序,要实现一个tab切换效果,看到知乎热榜上的滑动切换tab效果还挺舒服的,刚好项目也需要...