您的位置：首页 > Web前端 > CSS

HTML+css实现元素居中对齐的方法

2019-07-27 21:41 393 查看

HTML+css实现元素居中对齐的方法

1.line-height实现居中对齐

此种方法只适用于单行文本的居中，需要知道父元素的高度，通过line-height的高度等于父元素的height高度就可以实现垂直居中。以下是单行居中的例子。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.main{
width: 500px;
height: 200px;
background: skyblue;
}
.main p{
text-align: center;/*文字水平居中*/
line-height: 200px;
}
</style>
</head>
<body>
<div class="main">
<p>我水平方向和垂直方向都居中啦</p>
</div>
</body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------------分割线
一下的例子均可以对多行文字进行居中对齐；对齐的的对象不限于文，也可以是两个父子元素进行居中对齐；

4.使用absolute实行居中对齐

2.1absolute+margin实现

该方法需要知道父元素的宽和高，通过margin的的大小撑开一个距离从而实现居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.main{
position: relative;
width: 500px;
height: 200px;
background: skyblue;
}
.main .box{
position: absolute;
width: 200px;
height: 50px;
left: 50%;
top: 50%;
margin-top: -25px;
margin-left: -100px;
background: gray;
}
</style>
</head>
<body>
<div class="main">
<div class="box">
使用absolute+margin实现居中
</div>
</div>
</body>
</html>

效果如下;

2.2通过absolute+transform实现

未知父元素的高度的情况下，通过给父元素position:relative，再给子元素position:absolute，通过translate即可定位到垂直居中的位置。translate(-50%,-50%)意思是相对自己向左边移动自身宽度一半的距离，向上相对自己向上移动自身高度一半的距离。
例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
position: relative;
width: 500px;
height: 200px;
background: skyblue;
}
.main p{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="main">
<p>transform实现垂直居中</p>
</div>
</body>
</html>

3.通过display:table-cell实现居中对齐

给快级父元素加display:table;属性，使得父元素成为块级表格；
给子元素加display：table-cell；属性，子元素成为列表元素
在给子元素加vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果;
此种方法可以给一大段文字做居中对齐的排版，文字会根据父元素的宽度自动换行，并且不许知道父元素的宽和高。
例子如下;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.main{
width: 500px;
height: 200px;
background: skyblue;
display: table;
}
.main p{
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<p>给父元素加display：table;给子元素加display：table-cell;给子元素加vertical-align:middle</p>
</div>
</body>
</html>

4.通过flex布局实现居中对齐

父元素使用flex布局,并定义两个属性值justify-content，align-items都为center，那么就定义为水平垂直居中
justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。
这种方法不需要知道父元素放的宽高。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.main{
width: 500px;
height: 200px;
background: skyblue;
display: flex;
justify-content: center;  /*水平居中对齐*/
align-items: center;  /*垂直居中对齐*/
}
.item{
width: 200px;
height: 30px;
background: gray;
}
</style>
</head>
<body>
<div class="main">
<div class="item"></div>
</div>
</body>
</html>

父元素使用flex布局，并且加上justify-content: center;属性，子元素使用margin 0 auto;同样可以实现居中对齐。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航