css 实现水平居中和垂直水平都居中

来源：互联网发布：js脚本怎么用编辑：程序博客网时间：2024/05/17 22:15

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .father{            width:500px;            height:500px;            position:relative;            background-color: aquamarine;        }        .son{            width:100px;            height:100px;            position: absolute;            background-color: antiquewhite;            top:0;            left:0;            right:0;            bottom: 0;            margin:auto;            text-align: center;            font-size: 3em;            font-family: "Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;        }        img{            margin: 0 auto;            display: block;        }    </style></head><body><div class="father">    <div class="son">son</div>    <img src="m1.png" width="100" height="100"></div></body></html>

说明：

1，上图图片水平居中，关键要设置

margin:0 auto; //自动填充

display:block;//因为img是行内元素，不占据空间，所以强制设置为块级元素

2.son 垂直水平都居中，关键需要设置：

father设置

position:relative;//相对定位

son设置:

position:absolute;

margin:auto;

0 0

css 实现水平居中 和 垂直水平都居中

css 实现水平居中和垂直水平都居中