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

CSS实现水平垂直居中小结

2016-03-15 13:31 731 查看

水平居中

水平居中实现只要设置margin：0 auto;就可以实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>水平居中</title>
<style type="text/css">
#box{width: 200px;height: 200px;background: red;margin: 0 auto;}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style type="text/css">
#box{
width: 200px;height: 200px;background: red;position:absolute;top:50%;margin-top: -100px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

CSS实现水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css实现水平垂直居中</title>
<style type="text/css">
.box{
/*
负边距+定位：水平垂直居中（Negative Margin）
使用绝对定位将content的定点定位到body的中心，然后使用负margin（content宽高的一半），
将content的中心拉回到body的中心，已到达水平垂直居中的效果。
*/
width:200px;
height:200px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left:-100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

CSS实现水平垂直居中（法2）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>垂直居中布局</title>
<style type="text/css">
html,body{
width: 100%;height: 100%;margin: 0;padding: 0;
}
#box {
width: 300px;
height: 300px;
background: red;
margin: 0 auto; /*水平居中*/
position: relative;/*相对自己当前进行定位*/
top: 50%;
margin-top: -150px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

CSS3实现垂直水平居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3实现垂直水平居中</title>
<style type="text/css">
#div1{
width: 200px;height: 200px;background: red;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%); /* 这里我们使用css3的transform来达到类似效果 */
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

CSS3 flex实现元素的垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>垂直居中布局</title>
<style type="text/css">
html,body{
width: 100%;height: 100%;margin: 0;padding: 0;
}
body{
display: flex;align-items: center;justify-content: center;
}
#box{
width: 200px;height: 200px;background: red;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

浮动元素居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>如何居中一个浮动元素</title>
<style type="text/css">
.p{
position: relative;
float: left;
left:50%;
border: 1px solid red;
}
.c{
position: relative;
float: left;
right: 50%;
}
</style>
</head>
<body>
<!-- 父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。
相对定位元素的定位是相对其正常位置。
-->
<div class="p">
<h1 class="c">居中浮动元素</h1>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航