【前端】CSS : 对齐、居中
【前端】CSS : 对齐、居中
Gavin-ZYX
发布于 2019-03-04 16:27:55
发布于 2019-03-04 16:27:55
介绍
文本、元素的对齐和居中在开发中经常会用到。本文分别对文本、元素的对齐、居中进行介绍
文本
文本水平居中
{ text-align:center }文本垂直居中
将line-height设为和height相同的高度(仅单行可用)
{
height:30px;
line-height:30px;
}元素
通用样式
.background {
background-color: #7FD0F3;
border-radius: 8px;
height: 100px;
}
.item {
width: 60%;
background-color: #F19EC4;
padding: 10px;
color: #FFFFFF;
border-radius: 8px;
}水平居中
通过**margin:auto**实现
.horizontal-align-center {
margin: auto;
}<div class="background">
<div class="item horizontal-align-center">PHP才是世界上最好的语言！！！</div>
</div>效果：
margin: auto;
元素设置margin:auto后，元素通过指定宽度，并将两边的空外边距平均分配
注：如果没有设置
width属性(或者设置 100%)，居中对齐将不起作用。
水平对齐
水平对齐——position
position更多用法参考：CSS : position
.horizontal-align-right {
position: absolute;
right: 10px;
}<div class="background">
<div class="item horizontal-align-right">PHP才是世界上最好的语言！！！</div>
</div>效果：
水平对齐
水平对齐——float
float更多用法参考：CSS : float
.horizontal-align-right2 {
float: right;
}<div class="background">
<div class="item horizontal-align-right2">PHP才是世界上最好的语言！！！</div>
</div>效果：如上图
垂直居中
.vertical-align-center {
margin: 0;
position: absolute;
top:50%;
-ms-transform: translate(-0%, -50%);
transform: translate(-0%, -50%);
}<div class="background" style="position: relative;" >
<p class="item vertical-align-center">PHP才是世界上最好的语言！！！</p>
</div>效果：
垂直居中
水平垂直居中
.align-center {
margin: 0;
position: absolute;
top:50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: auto;
}<div class="background" style="position: relative;" >
<p class="item align-center">PHP才是世界上最好的语言！！！</p>
</div>通过flex实现
强大的flex几乎能满足你的所有需求
水平居中
.horizontal-align-center-flex {
display: flex;
justify-content: center;
}<div class="background horizontal-align-center-flex" >
<p class="item">PHP才是世界上最好的语言！！！</p>
</div>效果：
水平居中
问题：高度有点怪 原因：p标签自带的margin
垂直居中
.vertical-align-center-flex {
display: flex;
align-items: center;
}<div class="background vertical-align-center-flex" >
<p class="item">PHP才是世界上最好的语言！！！</p>
</div>
垂直居中
子元素使用
align-self: center也能垂直居中
水平垂直居中
.align-center-flex {
display: flex;
justify-content: center;
align-items: center;
}<div class="background align-center-flex" >
<p class="item">PHP才是世界上最好的语言！！！</p>
</div>效果：
水平垂直居中
flex更多用法参考：Flex 布局教程：语法篇
参考
http://www.runoob.com/css/css-align.html
有错误之处，感谢指出，接收批评
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.02.14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录