html水平垂直设置,CSS实现水平垂直的几种方法

目录

水平居中

垂直居中

水平垂直居

一、水平居中

内联元素和块级元素实现水平居中的方法不一样，其中块级元素又分定宽和不定宽两种情况

内联元素水平居中

父元素为块级元素，在父元素设置 text-align: center; 即可

代码：

我是内联元素

.container{

width: 100%;

height: 100px;

background-color: darkseagreen;

/* 父元素是块级元素，直接设置text-align属性 */

text-align: center;

}

效果：

image.png

块级元素水平居中(定宽)

块级定宽，谁居中谁 margin: 0 auto;

代码：

.container{

width: 100%;

height: 100px;

background-color: darkseagreen;

}

.first_box{

width: 50px;

height: 50px;

background-color: rosybrown;

/* 块级定宽，谁居中谁margin: 0 auto; */

margin: 0 auto;

}

效果：

image.png

代码：

我是不定宽的块级元素

.container{

width: 500px;

height: 100px;

background-color: darkseagreen;

text-align: center;

}

.second_box{

background-color: rosybrown;

display: inline;

}

效果：

image.png

代码：

.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;

}

效果

image.png

代码：

.container2{

width: 500px;

height: 100px;

background-color: darkseagreen;

display: flex;

justify-content: center;

}

.container2 div{

width: 50px;

height: 50px;

background-color: rosybrown;

}

效果：

image.png

flex布局详见阮一峰的flex布局教程 语法篇

二、垂直居中

实现垂直居中，亦分内联元素和块级元素，其中块级元素同分定高和不定高两种情况

内联元素垂直居中

单行元素，仅需设置很高等于盒子高即可；若为多行元素，则需给父元素设置display: table-cell;、vertical-align: middle;

单行代码：

单行行内元素

.container{

width: 500px;

height: 200px;

background-color: darkseagreen;

}

.container p{

line-height: 200px;

}

效果：

image.png

多行代码：

我是多行行内元素我是多行行内元素我是多行行内元素我是多行行内

元素我是多行行内元素我是多行行内元素我是多行行内元素我是多行行内元素我是多行行内元素

.container{

width: 500px;

height: 200px;

background-color: darkseagreen;

display: table-cell;

vertical-align: middle;

}

效果：

image.png

代码：

.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;

}

效果：

image.png

不定高度

.container{

width: 500px;

height: 200px;

background-color: darkseagreen;

position: relative;

}

.container div{

width: 50px;

background-color: rosybrown;

position: absolute;

top: 50%;

transform: translateY(-50%);

}

效果：

image.png

使用flex实现垂直居中

代码：

不定高度

.container{

width: 500px;

height: 200px;

background-color: darkseagreen;

display: flex;

align-items: center;

}

.container div{

width: 50px;

background-color: rosybrown;

}

效果：

image.png

flex布局详见阮一峰的flex布局教程 语法篇

三、水平垂直居中

代码：

.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;

}

效果：

代码：

.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;

}

效果：