CSS之元素水平/垂直居中问题_面试题 css元素水平垂直居中-优快云博客

本文链接：https://blog.youkuaiyun.com/Mr_28/article/details/54755580

行内元素的水平居中

方法一：

使用text-align:center;实现水平居中。

示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS之居中</title>

<style type="text/css">

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-size: 20px;

font-family: "microsoft yahei";

}

#div1 {

text-align: center;

}

#div1, span, input, img, p, #div1-1 {

border: 1px solid;

}

#div1 img {

width: 200px;

height: 100px;

}

#div1-1 {

width: 300px;

}

</style>

</head>

<body>

<div id="div1">

<span>我是行内元素 span</span><br />

<a href="">我是行内元素 a</a><br />

<input type="text" id=""value="我是行内元素 input" /><br />

<img src="img/wallpaper.jpg"alt="我是行内元素 img" />

<p>我是块级元素 p</p>

<div id="div1-1">

我是块级元素 div

</div>

</body>

</html>

运行效果：

单行文本的垂直居中

方法：

使用line-height实现垂直居中。此方法同时适用于行内元素和块级元素。

示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS之居中</title>

<style type="text/css">

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-size: 20px;

font-family: "microsoft yahei";

}

div {

border: 1px solid;

}

#div1 {

width: 400px;

height: 300px;

text-align: center;

}

a {

line-height: 300px;

}

</style>

</head>

<body>

<div id="div1">

<a href="">我是行内元素 a</a>

</div>

</body>

</html>

运行效果：

多行文本的垂直居中

方法：

父级使用display: table;子级使用display:table-cell;vertical-align: middle; 此方法同时适用于行内元素和块级元素。

示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS之居中</title>

<style type="text/css">

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-size: 20px;

font-family: "microsoft yahei";

}

div {

border: 1px solid;

}

#div1 {

display: table;

width: 400px;

height: 300px;

text-align: center;

}

#div1-1 {

display: table-cell;

width: 200px;

vertical-align: middle;

}

</style>

</head>

<body>

<div id="div1">

<div id="div1-1">

我是块级元素 div1-1<br />我是块级元素 div1-1

</div>

</body>

</html>

运行结果：

块级元素的水平居中

方法一：

在该元素默认定位（static）或者relative定位的情况下，且该元素的宽度确定，且没有浮动，则可以使用 margin: 0 auto; 实现水平居中。

示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS之居中</title>

<style type="text/css">

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-size: 20px;

font-family: "microsoft yahei";

}

div {

border: 1px solid;

}

#div1 {

width: 500px;

height: 600px;

text-align: center;

}

#div1-1 {

width: 200px;

margin: 0 auto;

}

</style>

</head>

<body>

<div id="div1">

<div id="div1-1">

我是块级元素 div1-1

</div>

</body>

</html>

运行结果：

方法二：

所要进行水平居中的元素宽度不确定，且使用了浮动以使其宽度自适应，那么可以通过对该元素添加一个父级div，并设置父级和子级元素同时向左/右浮动，并都设置为相对定位，然后，将父级元素右/左拉50%，子级元素左/右拉50%即可。

示例：

#div1 {

position: relative;

left: 50%;

float: left;

text-align: center;

}

#div1-1 {

position: relative;

left: -50%;

float: left;

}

运行效果：

块级元素的水平+垂直居中

方法一：

在该元素relative/absolute/fixed定位的情况下，且该元素的宽度和高度确定，且没有浮动，则可以使用如下示例代码实现水平+垂直居中。

示例：

#div1 {

position: relative;

width: 500px;

height: 300px;

text-align: center;

}

#div1-1 {

position: absolute;

left: 50%;

top: 50%;

width: 200px;

height: 50px;

margin-left: -100px;

margin-top: -25px;

}

运行效果：

方法二：

在该元素relative+float/absolute/fixed定位的情况下，且该元素的宽度和高度都不确定，则可以使用CSS3中的translate()方法实现水平+垂直居中。

示例：

#div1 {

position: relative;

width: 400px;

height: 300px;

text-align: center;

}

#div1-1 {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);;

transform: translate(-50%, -50%);

}

运行效果：

注：

此方法也适用于该元素的宽高值确定的情况，如果宽高确定，只需要将百分值改为确定的值即可。此外，因为用的是CSS3的新属性，所以难免存在浏览器兼容问题了。

方法三：

使用flex布局。

示例：

#div1 {

position: relative;

display: flex;

justify-content: center;

align-items: center;

width: 400px;

height: 300px;

text-align: center;

}

#div1-1 {

display: flex;

justify-content: center;

align-items: center;

width: 300px;

height: 100px;

}

运行效果：

注：

使用这种方式实现居中的效果其实还是蛮简单好用的，无论想要居中的元素是否有浮动，无论单行抑或多行，无论宽高是否确定都可以。