CSS实现水平垂直的几种方法
2020-03-15 本文已影响0人
Game0ver
目录
- 水平居中
- 垂直居中
- 水平垂直居
一、水平居中
内联元素和块级元素实现水平居中的方法不一样，其中块级元素又分定宽和不定宽两种情况
- 内联元素水平居中
父元素为块级元素，在父元素设置 text-align: center; 即可
代码：
<!-- HTML--->
<div class="container">
<p>我是内联元素</p>
</div>
<!-- CSS -->
<style>
.container{
width: 100%;
height: 100px;
background-color: darkseagreen;
/* 父元素是块级元素，直接设置text-align属性 */
text-align: center;
}
</style>
效果：
image.png
- 块级元素水平居中（定宽）
块级定宽，谁居中谁 margin: 0 auto;
代码：
<!-- HTML -->
<div class="container">
<div class="first_box"></div>
</div>
<!-- CSS -->
<style>
.container{
width: 100%;
height: 100px;
background-color: darkseagreen;
}
.first_box{
width: 50px;
height: 50px;
background-color: rosybrown;
/* 块级定宽，谁居中谁margin: 0 auto; */
margin: 0 auto;
}
</style>
效果：
image.png
- 块级元素水平居中（不定宽）
块级不定宽，子元素设display: inline;，父元素设text-align: center;
代码：
<!-- HTML -->
<div class="container">
<div class="second_box">我是不定宽的块级元素</div>
</div>
<!-- CSS -->
<style>
.container{
width: 500px;
height: 100px;
background-color: darkseagreen;
text-align: center;
}
.second_box{
background-color: rosybrown;
display: inline;
}
</style>
效果：
image.png
- 使用定位属性实现水平居中
父元素设置position: relative;，子元素设置position: absolute;、left: 50%;、margin-left: -元素宽度一半
代码：
<!-- HTML -->
<div class="container1">
<div class="third_box"></div>
</div>
<!-- CSS -->
<style>
.container1{
width: 500px;
height: 100px;
background-color: darkseagreen;
position: relative;
}
.third_box{
width: 50px;
height: 50px;
background-color: rosybrown;
position: absolute;
left: 50%;
margin-left: -25px;
}
</style>
效果
image.png
- 使用flex布局实现水平居中
只需在父元素设置display: flex;、justify-content: center;
代码：
<!-- HTML -->
<div class="container2" >
<div></div>
</div>
<!-- CSS -->
<style>
.container2{
width: 500px;
height: 100px;
background-color: darkseagreen;
display: flex;
justify-content: center;
}
.container2 div{
width: 50px;
height: 50px;
background-color: rosybrown;
}
</style>
效果：
image.png
flex布局详见阮一峰的flex布局教程 语法篇
二、垂直居中
实现垂直居中，亦分内联元素和块级元素，其中块级元素同分定高和不定高两种情况
- 内联元素垂直居中
单行元素，仅需设置很高等于盒子高即可；若为多行元素，则需给父元素设置display: table-cell;、vertical-align: middle;
单行代码：
<!-- HTML -->
<div class="container">
<p>单行行内元素</p>
</div>
<!--CSS-->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
}
.container p{
line-height: 200px;
}
</style>
效果：
image.png
多行代码：
<!-- HTML -->
<div class="container">
<p>我是多行行内元素我是多行行内元素我是多行行内元素我是多行行内
元素我是多行行内元素我是多行行内元素我是多行行内元素我是多行行内元素我是多行行内元素</p>
</div>
<!--CSS-->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
display: table-cell;
vertical-align: middle;
}
</style>
效果：
image.png
- 块级元素垂直居中（定高）
定宽时，使用定位实现垂直居中。父元素设置position: relative;，子元素设置display:absolute;、left: 50%;、margin-top: -一半高度
代码：
<!-- HTML -->
<div class="container">
<div></div>
</div>
<!-- CSS -->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
position: relative;
}
.container div{
width: 50px;
height: 50px;
background-color: rosybrown;
position: absolute;
top: 50%;
margin-top: -25px;
}
</style>
效果：
image.png
- 块级元素居中（不定高）
不定高时，需要使用到 transform: translateY(-50%);
代码：
<!-- HTML -->
<div class="container">
<div>不定高度</div>
</div>
<!-- CSS -->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
position: relative;
}
.container div{
width: 50px;
background-color: rosybrown;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
效果：
image.png
- 使用flex实现垂直居中
代码：
<!-- HTML -->
<div class="container">
<div>不定高度</div>
</div>
<!-- CSS -->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
display: flex;
align-items: center;
}
.container div{
width: 50px;
background-color: rosybrown;
}
</style>
效果：
image.png
flex布局详见阮一峰的flex布局教程 语法篇
三、水平垂直居中
- 利用定位实现水平垂直居中
父元素设置position: relative;，子元素设置position: absolute;
代码：
<!-- HTML -->
<div class="container">
<div></div>
</div>
<!-- CSS -->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
position: relative;
}
.container div{
width: 50px;
height: 50px;
background-color: rosybrown;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
效果：
- 利用flexbox实现水平垂直居中
父元素设置position: relative;，子元素设置position: absolute;
代码：
<!-- HTML -->
<div class="container">
<div></div>
</div>
<!-- CSS -->
<style>
.container{
width: 500px;
height: 200px;
background-color: darkseagreen;
display: flex;
justify-content: center;
align-items: center;
}
.container div{
width: 50px;
height: 50px;
background-color: rosybrown;
}
</style>
效果：
