html_html/css_WEB-ITnose の水平方向と垂直方向のセンタリングに関する概要

html の水平方向と垂直方向の中央揃え

最近、中央揃えの問題がたくさん発生したので、時間をかけてここにまとめました。 0.0~~
1. テキストを中央揃えにします。

1 <div class="wrap">2       我在中间……3 </div>

1.1. height+line-height+text-center (単一行のみ中央揃え可能)

1 .wrap{2     width:200px; 3     height:200px;4     border:1px solid red; 5     text-align: center;6     line-height: 200px;7 }

ps:text-align:center只是将元素下面的内联元素居中显示

1.2display:table-cell (固定高さの複数行を中央揃え)

1 .wrap{2     width:200px; 3     height:200px;4     border:1px solid red; 5     text-align: center; 6     display:table-cell; 7     vertical-align: middle;8 }

display:table-cell：ie67不管用,最好配合display:table;一起用ie67下：（以后也不用了，不过也放这儿吧）方法一：（通过em标签高度与父级等高，所以span和em居中就相当于span在父级居中）

1 <div class="wrap">2    <span>3        我在中间…… 我在中间…… 我在中间…… 我在中间……4    </span>5    <em></em>6 </div>

 1 .wrap{ 2     width:200px;  3     height:200px; 4     border:1px solid red;  5     text-align: center; 6 } 7 .wrap span{ 8     vertical-align: middle; 9     display:inline-block; 10     width:180px;11 }12 .wrap em{13     height:100%;14     vertical-align: middle; 15     display:inline-block;16 }

方法二：（通过给子元素增加一个绝对定位的父级标签，再配合子元素的相对定位水平垂直居中）

1 <div class="wrap">2     <span class="span1">3        <span class="span2">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>4     </span>5 </div>

 1 .wrap{ 2     width:200px;  3     height:200px; 4     border:1px solid red; 5     display:table; 6     position:relative;  7     overflow: hidden; 8 } 9 .wrap .span1{10     display:table-cell; 11     vertical-align: middle; 12     text-align: center;13     *position:absolute;14     top:50%;15     left:50%;16 }17 .wrap .span2{18     *position:relative;19     top:-50%;20     left:-50%;21 }

1.3padding (内側のパディング、言うまでもありません)

1 .wrap{2     width:200px;3     border:1px solid red;4     padding:50px 0;5 }

2. 中央揃えの要素

1 <div class="wrap">2     <span></span>3 </div>

2.1position:absolute+margin 負の値 (幅が必要)マージンを計算するための高さと)

 1 .wrap{ 2     width:200px;  3     height:200px; 4     position:absolute;  5     top:50%;  6     left:50%;  7     margin-top:-101px;  8     margin-left:-101px; 9     border:1px solid red;10 }11 .wrap span{ 12     width:80px; 13     height:80px; 14     background:red;15     position: absolute; 16     top:50%; 17     left:50%; 18     margin-top:-40px; 19     margin-left:-40px;20 }

ps:position:absolute/fixed使内嵌支持宽高

2.2Position:absolute+margin:auto

 1 .wrap{ 2     width:200px;  3     height:200px; 4     position:absolute;  5     top:50%;  6     left:50%;  7     margin-top:-101px;  8     margin-left:-101px; 9     border:1px solid red;10 }11 .wrap span{ 12     width:80px; 13     height:80px; 14     background:red;15     position: absolute; 16     top:0;17     right:0;18     bottom:0;19     left:0;20     margin:auto;21 }

2.3position 負の値

1 <div class="wrap">2     <span class="span1">3        <span class="span2">fds</span>4     </span>5 </div>

 1 .wrap{ 2     width:200px;  3     height:200px; 4     position:absolute;  5     top:50%;  6     left:50%;  7     margin-top:-101px;  8     margin-left:-101px; 9     border:1px solid red; 10 }11 .wrap .span1{12     position:absolute;13     top:50%;14     left:50%;15     width:80px;16     height:80px;17 }18 .wrap .span2{ 19     width:80px;20     height:80px;21     display:block;22     line-height:80px;23     text-align:center;24     background:red; 25     position:relative;26     top:-50%;27     left:-50%;28 }

2.4transform: -50%、-50%) ;(翻訳は互換性を考慮せず、それ自体に対してオフセットされます。この方法は良いです)

1 <div class="wrap">2        <span >fds</span>3 </div>

 1 .wrap{ 2     width:200px;  3     height:200px; 4     position:absolute;  5     top:50%;  6     left:50%;  7     margin-top:-101px;  8     margin-left:-101px; 9     border:1px solid red;10 }11 .wrap span{     12     width:80px;13     height:80px;14     background:red;15     position:absolute;16     top:50%;left:50%;17     -webkit-transform: translate(-50%,-50%);18     -ms-transform: translate(-50%,-50%);19     -o-transform: translate(-50%,-50%);20     transform: translate(-50%,-50%);21 } 

2.5 並列 1 つのタグ

1 <div class="wrap">2    <span></span>3    <em></em>4 </div>

 1 .wrap{ 2     width:200px;  3     height:200px; 4     position:absolute;  5     top:50%;  6     left:50%;  7     margin-top:-101px;  8     margin-left:-101px; 9     border:1px solid red; 10     text-align: center;11 }12 .wrap span{13     width:80px;14     height:80px;15     background:red;16     display:inline-block; 17     vertical-align: middle;18 } 19 .wrap em{20     height:100%;21     vertical-align:middle; 22     display:inline-block;23 }

2.6 表示: テーブルと表示: テーブルセル

1 <div class="wrap">2     <div>3         <span></span>4     </div>5 </div>

 1 .wrap{ 2     width:200px;  3     height:200px; 4     position:absolute;  5     top:50%;  6     left:50%;  7     margin-top:-101px;  8     margin-left:-101px; 9     border:1px solid red; 10     display:table;11 }12 .wrap div{13     display:table-cell;14     vertical-align: middle;15     text-align: center;16 }17 .wrap span{ 18     width:80px;19     height:80px;20     background:red; 21     display:inline-block;22 } 

2.7display:box

1 <div class="wrap">2     <span >fds</span>3 </div>

 1 .wrap{ 2     width:200px;  3     height:200px; 4     position:absolute;  5     top:50%;  6     left:50%;  7     margin-top:-101px;  8     margin-left:-101px; 9     border:1px solid red; 10     display: -webkit-box;11     -webkit-box-pack:center;12     -webkit-box-align:center;13 }14 .wrap span{15     width:80px;16     height:80px;17     background:red;18     display:block;19 }

3. 中央に配置された浮動要素

1 <div class="wrap">2      <ul>3          <li>fdasfd</li>4          <li>fdsfds</li>5          <li>fdfds</li>6      </ul>7 </div>

 1 .wrap{ 2     width:800px;  3     height:200px; 4     margin:200px auto; 5     border:1px solid red;  6     position:relative; 7     overflow: hidden; 8 } 9 .wrap ul{10     float: left; 11     position: relative; 12     left:50%;13     top:50%; 14     border:1px solid red; 15     height:100px; 16 }17 .wrap li{18     float: left; 19     width:100px; 20     height:100px; 21     background:red; 22     position: relative; 23     left:-50%;24     top:-50%; 25     margin-left:10px; 26     list-style: none; 27     _display:inline; /*ie6双边距*/28     *overflow: hidden;/*ie7下面不支持宽度*/29 }