css实现水平垂直居中

第一种：利用css3的transform和绝对定位

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    /*消除行内元素的默认边距*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
}
body{
    background-color: #999;
}
main{
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);/*以左上角为圆点向上和左偏移自身宽高50%的距离*/
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
}
</style>
<body>
    <main>水平垂直居中</main>
</body>
</html>

效果如图所示，并且不管如何改变页面的宽高，元素始终水平垂直居中。

第二种：利用css3的transform和相对定位

使用这种方法必须设置html,body的高度

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    /*消除行内元素的默认边距*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
}
html,body{/*body不是html页面的根元素，html才是根元素，如果仅仅设置body的100%，不设置html元素的高度为100%，那么body的高度不会生效*/
    height: 100%;
    background-color: #999;
}
.main{
    height: 300px;
    background-color: #fff;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
}
</style>
<body>
    <div class="main">水平垂直居中</div>
</body>
</html>

第三种：利用margin和相对定位

使用这种方法必须设置html,body的高度及自身元素的宽高

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    /*消除行内元素的默认边距*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
}
html,body{/*body不是html页面的根元素，html才是根元素，如果仅仅设置body的100%，不设置html元素的高度为100%，那么body的高度不会生效*/
    width: 100%;
    height: 100%;
    background-color: #999;
}
.main{
    width: 300px;
    height: 300px;
    background-color: #fff;
    margin: 0 auto;
    position: relative;
    top: 50%;
    margin-top: -150px;
}
</style>
<body>
    <div class="main">水平垂直居中</div>
</body>
</html>

第四种：利用flex弹性布局

使用这种方法必须设置html,body的高度

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    /*消除行内元素的默认边距*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
}
html,body{/*body不是html页面的根元素，html才是根元素，如果仅仅设置body的100%，不设置html元素的高度为100%，那么body的高度不会生效*/
    height: 100%;
    background-color: #999;
    display: flex;
    align-items: center; /*定义body的元素垂直居中*/
    justify-content: center; /*定义body的里的元素水平居中*/
}
.main{
    background-color: #fff;
}
</style>
<body>
    <div class="main">水平垂直居中</div>
</body>
</html>

也可以使用

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    /*消除行内元素的默认边距*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
}
html,body{/*body不是html页面的根元素，html才是根元素，如果仅仅设置body的100%，不设置html元素的高度为100%，那么body的高度不会生效*/
    width: 100%;
    height: 100%;
    background-color: #999;
    display: flex;
}
.main{
    background-color: #fff;
    /*当我们使父元素display:flex时，margin:auto不仅可以水平居中，也能够实现垂直居中。这是因为auto外边距会平分水平或垂直方向上的额外空间。*/
    margin:auto;
}
</style>
<body>
    <div class="main">水平垂直居中</div>
</body>
</html>

来源：https://www.cnblogs.com/ruilin/p/11412075.html

标签

margin

垂直居中

绝对定位

html居中

background

auto

css