css居中指南

<!doctype html>
<head>
    <title>css居中</title>
    <meta charset="utf-8">
    <style>
        .parent{
            text-align: center;
        }
        .parent1{
            display: table;
            width: 200px;
            height: 400px;
            background-color: red;

        }
        .parent2{
            position: relative;
            height: 100px;
        }        
        .parent3{
            position: relative;
            height: 100px;
            background-color: yellow;
        }
        .parent4{
            position: relative;
        }
        .child{
            width: 400px;
            margin: 0 auto;
        }
        .child1{
              display: inline-block;
              text-align: left;
        }        
        .child2{
            height: 100px;
            line-height: 100px;
            white-space: nowrap;
        }    
        .child3{
            display: table-cell;
            vertical-align: middle;
        }    
        .child4{
            position: absolute;
            top: 50%;
        }
        .child5{
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
        }
        .child6{
            width: 300px;
            height: 100px;
            padding: 20px;
            position: absolute;  
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .child7{
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
<div>    
    水平居中
</div>
<div  class="parent">
    <a>水平居中行内元素</a>
</div>

<div>
    <div class="child">水平居中块级元素</div>
</div>
    
<div class="parent">
    <div class="child1">水平居中多个块元素</div>
    <div class="child1">水平居中多个块元素</div>
    <div class="child1">水平居中多个块元素</div>
    <div class="child1">水平居中多个块元素</div>
</div>

<hr>
<div>
    垂直居中
</div>
<div>
    <a class="child2">垂直居中行内元素</a>
</div>
<div class="parent1">
    <a class="child3">垂直居中行内元素</a>
    <a class="child3">垂直居中行内元素</a>
    <a class="child3">垂直居中行内元素</a>
    <a class="child3">垂直居中行内元素</a>
</div>

<div class="parent2">
    <div class="child4">垂直居中块元素</div>
</div>

<div class="parent3">
    <div class="child5">垂直居中未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度未知元素高度元素</div>
</div>

<hr>
<div>
    既水平又垂直
</div>

<div class="parent4">
    <div class="child6">固定高度</div>
</div>

<div class="parent4">
    <div class="child7">不固定高度</div>
</div>


</body>
posted on 2016-12-19 17:10 大夏- 阅读(90) 评论(0) 收藏举报