css的居中

gigipop 2014-05-30

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>

相关推荐

覆雪蓝枫 / 0评论 2019-06-27