css的居中
css的居中问题有好几种，第一种是水平居中，其实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title>xxx</title>
<style type="text/css">
.parent {
width: 400px;
height: 400px;
background-color: red;
text-align: center;
}
.child {
width: 200px;
height: 200px;
background-color: blue;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>第二种是垂直居中，其实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title>xxx</title>
<style type="text/css">
.parent {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.child {
background-color: blue;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>第三种是图片文字垂直居中，其实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title>xxx</title>
<style type="text/css">
.parent {
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
.child {
background-color: blue;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
}
img {
width: 100px;
height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"><img src="Koala.jpg" />character</div>
</div>
</body>
</html> 相关推荐
gufudhn 2020-06-12
沈宫新 2020-05-04
STPace 2020-02-17
Phoebe的学习天地 2019-07-01
Phoebe的学习天地 2019-07-01
王为仁 2019-07-01
WebVincent 2019-07-01
王景迁 2019-07-01
libowen0 2019-06-30
淡风wisdon大大 2019-06-28
冰蝶 2018-08-17
qiupu 2019-06-28
Dorissun 2016-09-22
hellowzm 2020-10-12
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
xiaohuli 2020-02-12
liusure0 2020-01-11