定位元素

 

1.水平居中

非块级元素水平居中：

设置父元素的text-align:center就可以了。

块级元素水平居中：

position不是absolute也不是fixed时（也就是并未脱离文档流），margin-left=margin-right=auto,块级元素width不是auto，就可实现水平居中。

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <meta charset="utf-8"/>
 4     <head>
 5         <style type="text/css">
 6             #header{
 7                 border: 1px solid red;
 8                 height: 100px;
 9             }
10             #container{
11                 border: 1px solid blue;
12                 margin:0 auto;
13                 width: 300px;
14                 height: 300px;
15                 text-align: center;
16             }
17         </style>
18     </head>
19     <body>
20         <div id="header" >header</div>
21         <div id="container" >
22             container
23         </div>
24     </body>
25 </html>
复制代码

2.垂直居中

文本垂直居中

如果只有一行本文，设置容器的line-height等于容器height。

 

 

 

复制代码
       #container{
        border: 1px solid blue;
        margin:0 auto;
        width: 300px;
        height: 300px;
        text-align: center;
        line-height: 300px;
       }
复制代码

 

如果是多行文本至少要再加一个容器box把文本包起来，可以设置box的margin或者其父容器的margin。另一个方法就是使用vertical-align属性，但这个属性只对表格元素有效，所以需要设置box父元素display:table，设置box的display:table-cell。

块级元素垂直居中

要借助position和left、top几个属性。top表示向下平移，其他同理。position属性有四个值：

　　static：   静态定位，默认值，在文档流中不移动，此时top等属性无效。

　　relative：相对定位，相对自己原本位置定位，不脱离文档流。

　　absolute：绝对定位，相对非static父元素定位，脱离文档流（原来位置被别人占了）。

　　fixed：固定定位，相对浏览器窗口定位，也脱离文档流，总用做购物车广告等。

如果要垂直居中的元素设置成绝对定位，top和left在按容器和居中元素大小设置一下就可以了，但前提是父元素是非static的。就像下面这样。

复制代码
<!DOCTYPE html>
<html>
    <meta charset="utf-8"/>
    <head>
        <style type="text/css">
            #header{
                border: 1px solid red;
                height: 100px;
            }
            #container{
                border: 1px solid blue;        
                margin:0 auto;    
                width: 300px;
                height: 300px;
                position: relative;
            }
            #content{
                position:absolute;  
                top: 100px;
                left: 100px;
                background-color: gray;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="header" >header</div>
        <div id="container" >
            <div id="content">
                content
            </div>
        </div>
    </body>
</html>
复制代码

换几种情况考虑，如果居中元素是相对定位的，就不要求父元素是非static的了。这固然好，但限制是不方便计算偏移量，偏移量是相对自己原位置算的，如果居中元素上方有兄弟节点也需要考虑进去，麻烦的是如果兄弟节点大小不固定，恐怕只能用脚本动态去算了。如果居中元素是固定定位的呢？考虑了一下，使用固定定位做垂直居中没有什么特殊的优势。

3.拉伸

对于行内元素、行内块级元素、浮动元素、表格及绝对定位元的素：

left=right=auto，width=auto时是横向收缩的

top=bottom=auto,height=auto时，是纵向收缩的

对于块级元素和绝对定位的元素：

left=right!=auto，width=auto时是横向拉伸的


复制代码
<!DOCTYPE html>
<html>
    <meta charset="utf-8"/>
    <head>
        <style type="text/css">
            label{
                border: 1px solid blue;
                margin: 1px 0;
            }
            div{
                border: 1px solid red;
                margin: 1px 0;
            }
        </style>
    </head>
    <body>
        <label>我是横向收缩的label1</label>
        <div>我是横向拉伸的div1</div>
    </body>
</html>
复制代码

auto通常是默认值，我们看到的非块级元素横向纵向多数是收缩的，如图中label。而块级元素div默认是横向拉伸纵向收缩的，如图中div1。浏览器通常会给元素加默认样式，所以元素并没有完全与浏览器窗口贴上，如果添加*{margin:0;padding:0;}就显示正常了。

对于绝对定位元素：

top=bottom=!auto,height=auto时，是纵向拉伸的。

复制代码
<!DOCTYPE html>
<html>
    <meta charset="utf-8"/>
    <head>
        <style type="text/css">
            div{
                position: absolute;
                background-color: green;
                top:0;
                bottom:0;
                height:auto;
            }
        </style>
    </head>
    <body>
        <div>我是纵向拉伸的div2</div>
    </body>
</html>
复制代码

 auto与100%的尺寸差别

auto意味着元素尺寸是自动调整的，width/height:100%会将元素尺寸拉伸到父元素大小，其外边距、边框等可能超过父元素。但table不会出现这种情况，因为表格的width/height规定的是table-cell的外部尺寸。
posted @ 2021-12-26 08:25  しっ  阅读(39)  评论(0)    收藏  举报