CSS的完全居中

发表于2016-05-14 14:58:45

行内元素:<a>、<span>、<img>、<input>、<label>、<strong>、<i>、<b>、<em>、<br>等
特点:1、不占据一整行,随内容而定。
           2、不可以设置宽和高,其宽度随着内容增加,高度随字体大小而改变。
           3、行内元素可以设置margin、padding的 left 和 right,top 和 bottom 不起作用。


块级元素:<div>、<ul>、<h1>、<p>、<form>、<table>、<tr>、<td>、<dl>、<dt>、<dd>、<hr>等
特点:1、总是占据一整行,正常流中不设置宽度则为父元素宽度的100%。
           2、宽和高都能设置。
           3、块级元素margin和padding都起作用。


行内元素居中:
text-align:center 作用于块级元素里的行内元素,若想要span垂直居中,只要设置 line-height为父元素的高度
因为行内元素里的内容默认就是垂直居中,line-height可以当作块级元素的height,所以这个span要在div里垂直居中只要 “高度”=“父级元素的高度”

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        body{
            border: 1px solid red;
            height:600px
        }
        #contain{
            width:600px;
            height: 300px;
            background-color: #ccc;
            text-align:center;
            margin:0 auto;
        }
        .testDiv{
            width:200px;
            height:100px;
            background-color: #4FA46B;
        }
        .centerSpan{
            line-height:100px;
         }
        </style>
    </head>
    <body>
        <div id="contain">
            <span class="centerSpan">容器内span居中</span>
            <div class="testDiv">div居中吗?</div>
        </div>
    </body>
</html>


块级元素居中:
块级元素完全居中有很多方法:负margin值、transform法、table-cell法、inline-block法、Flexbox法 具体请查看css做到完全居中
个人也比较喜欢 "Absolute-Center"
这种方法

<!--居中以后,具体位置可以设置top、right、bottom、left来控制-->
<!--注意父元素要设置relative-->
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

响应式居中:
在Absolute-Center基础上,元素宽高都用百分比,并设置最大最小值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        body{
            border: 1px solid red;
        }
        #contain{
            width:600px;
            height: 600px;
            position: relative;
            background-color: #ccc;
            margin:0 auto;
        }
        
        #responsiveBox{
            width: 50%;
            height: 50%;
            min-width: 100px;
            max-width: 400px;
            /*padding: 40px;*/
            margin: auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            background-color: #4FA46B;
            border: 1px solid #000;
            overflow: auto;
        }
        </style>
    </head>
    <body>
        <div id="contain">
            <!--<div id="absoluteBox"><h1>容器内完全居中</h1></div>-->
            <div id="responsiveBox"><span>容器内响应式完全居中</span></div>
        </div>
    </body>
</html>

响应式图片居中:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        body{
            border: 1px solid red;
        }
        #contain{
            width:600px;
            height: 600px;
            position: relative;
            background-color: #ccc;
            margin:0 auto;
        }
        #responsiveImg{
            width: 60%;
            height: auto;
            min-width:300px;
         
            margin: auto;
            position: absolute;
            top: 0px; left: 0; bottom: 0; right: 0;
            background-color: #4FA46B;
            border: 3px solid #000;
        }
        </style>
    </head>
    <body>
        <div id="contain">
            <img id="responsiveImg" src="http://placekitten.com/g/500/200" alt="响应式图片" title="响应式图片"/>
        </div>
    </body>
</html>

可视区域内居中:
多用于弹窗、遮罩层

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        body{
            border: 1px solid red;
        }
        #contain{
            width:600px;
            height: 600px;
            position: relative;
            background-color: #ccc;
        }
        #fixedBox{
            width: 20%;
            height: 20%;
            margin: auto;
            position: fixed;
            background-color: #4FA46B;
            top: 0; left: 0; bottom: 0; right: 0;
            border: 1px solid red;
        }
        </style>
    </head>
    <body>
        <div id="contain">
            <div id="fixedBox"><h1>Hello,可视区域居中</h1></div>
        </div>
    </body>
</html













评论(0)

请先登录后再评论,如果没有账号请先注册

发表评论