码迷,mamicode.com
首页 > Web开发 > 详细

css 水平、垂直居中

时间:2016-05-22 19:50:12      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

水平居中

行内元素

行内元素:(img、span、文字等行内元素),通过在父级元素设置 text-align:center 使元素水平居中。

块级元素

块级元素:(div、p、h1...h6、ul、li等块级元素),通过在要居中元素设置 margin:0 auto(上、右、下、左),这里表示上下0 左右自适应,达到元素水平居中。

垂直居中

行内元素

行内元素:(img、span、文字等行内元素),通过在父级元素设置display: table-cell;vertical-align: middle; 使元素垂直居中,如果是单行文字或者其他 可以设置line-height:容器高;

块级元素

高度固定通常是使用

  • 绝对定位与负边距
  • 绝对定位与margin
  • display table-cell

高度不固定

  • display table-cell  
  • translate 
  • flex 布局

还是上代码比较实在

行内元素水平、垂直居中

文字、图片水平、垂直居中

主要是利用

  1. text-align: center; //水平对齐方式
  2. display: table-cell;//以td形式渲染
  3. vertical-align: middle;//垂直对齐方式
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    * {
        padding: 0;
        margin: 10px 0 0 0;
    }

    div {
        width: 200px;
        height: 200px;
        border: solid 1px red;
    }

    img {
        width: 100px;
        height: 100px;
        border: 0px;
    }

    span {
        border: solid 1px blue
    }

    .div1 {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }

    .div2 {
        line-height: 200px;
        text-align: center;
        margin: 0 auto;
    }
</style>
<body>

<p>文字</p>
<div class="div1" title="行内元素水平垂直居中">
    文字水平垂直居中1
</div>

<p>文字</p>
<div class="div2" title="行内元素水平垂直居中">
    文字水平垂直居中2
</div>

<p>图片水平垂直居中</p>
<div class="div1" title="行内元素水平垂直居中">
    <img src="images/pro_1.jpg">
</div>

<p>span水平垂直居中</p>
<div class="div1" title="行内元素水平垂直居中">
    <span>this is span</span>
</div>
</body>
</html>
View Code

技术分享

 

块级元素水平、垂直居中

固定高度水平、垂直居中

固定高度水平垂直居中一般思路:

技术分享技术分享

绝对定位与负边距

脱离文档流之后,在通过设置负的边距来达到水平、垂直居中效果;

技术分享
  <style>
        * {
            padding: 0;
            margin: 0 0 0 0;
            box-sizing: border-box;
        }

        p{margin:20px 0 0 20px;}

        /*绝对定位与负边距实现*/
        .divBox {

            height: 200px;
            border: solid 1px red;
            position: relative;
        }
        .divContentBox{
            width: 100px;
            height: 100px;
            border: solid 1px blue;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;

        }
    
    </style>

<p>绝对定位与负边距实现</p>
<div class="divBox">
    <div class="divContentBox">固定宽度、高度水平垂直居中</div>
</div>
View Code

如果不能脱离文档流就增加一个空的容器

技术分享
<style>
  /*增加空容器与margin */

        #divBox{
            width: 200px;
            height: 200px;
            border: solid 1px red;

        }
       #nullBox{
           width: 100%;
           height: 50%;
           background-color: blue;
         }
        #divContentBox {
            width: 100px;
            height: 100px;
                margin: -50px auto;
            border: solid 1px red;

        }

</style>

<p>增加一个空的容器</p>
<div id="divBox">
    <div id="nullBox"></div>
    <div id="divContentBox">固定宽度、高度水平垂直居中</div>
</div>
View Code

利用绝对定位与margin

技术分享
<style>
#div1Box{
           /*width: 200px;*/
           height: 200px;
           border: solid 1px red;
           position: relative;
       }
        #ContentBox{

            height: 100px;
           display: inline;
            border: solid 1px blue;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
</style>

<p>绝对定位与margin</p>
<div id="div1Box">
    <div id="ContentBox">固定高度水平垂直居中</div>
</div>
View Code

css3 transform

技术分享
<style>

 #container{
            height: 300px;
            position:relative;
            border: solid 1px red;
        }
        #center{
            position: absolute;
            width:100px;
            height:100px;
            border: solid 1px red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
</style>

<p>css3 transform</p>
<div id="container">
    <div id="center">固定高度水平垂直居中</div>
</div>
View Code

display table-cell

技术分享
<style> 
#container1{
            width: 600px;
            text-align: center;
            vertical-align: middle;
            border: solid 1px red;
            display: table-cell;
            height: 300px;
        }
        #center2{
            width: 100px;
            height: 100px;
            border: solid 1px red;
            display: inline-block;
        }
    </style>
<p>display table-cell</p>
<div id="container1">
    <div id="center2">>固定高度水平垂直居中</div>
</div>
View Code

高度不固定水平、垂直居中

display:table-cell 

  • 父元素设置 display: table-cell;

  • text-align: center;

  • vertical-align: middle; 可以达到垂直居中;

  • 子元素设置margin: 0 auto;可以达到水平居中;

translate

  • 子元素脱离稳档流

  • top、left 偏移 50%

  • transform: translate(-50%, -50%);返回自身负的50%

 

flex布局

  • 子元素设置水平、垂直对齐方式justify-content: center;align-items: center;

完整代码:

技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*-- display table-cell */

        #root {
            width: 100%;
            display: table;
        }

        .bigBox {
            width: 100%;
            height: 200px;
            border: solid 1px red;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .content {
            width: 300px;
            background-color: green;
            margin: 0 auto;
        }

        /*translate */

        .parent {
            width: 100%;
            height: 200px;
            border: 1px solid red;
            position: relative;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background: #22B14C;
        }

        /*flex*/
        .parent1 {
            width: 100%;
            height: 200px;
            border: solid 1px red;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .child1 {
            background: green;
        }
    </style>
</head>
<body>

<div id="root">

    <div class="bigBox">
        <div class="content">
            <span>this is span</span><br/>

            <p>这是一个新的开始</p>

            <div>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="parent">
    <div class="child">
        <p>this is demo2</p>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </div>
</div>

<div class="parent1">
    <div class="child1">
        <p>this is demo3</p>

        <p>this is demo3</p>

        <p>this is demo3</p>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </div>
</div>

</body>
</html>
View Code

 



 

css 水平、垂直居中

标签:

原文地址:http://www.cnblogs.com/CandyManPing/p/5517327.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!