css中div中的內容居中
阿新 • • 發佈:2019-01-03
第一種使用table標籤(很少用)
第三種方式 、集合float、position、left來完成
html程式碼
html程式碼
效果如下:
css程式碼
/* 使用table包裹要居中的元素,因為table有自適應的設定 然後將table居中即可。
*/
table{
margin: 0px auto;
}
html中的程式碼
<div> <table> <tbody> <tr> <td> <ul> <li>這個內容是使用table自動居中的1</li> <li>這個內容是使用table自動居中的2</li> <li>這個內容是使用table自動居中的3</li> </ul> </td> </tr> </tbody> </table> </div>
第二種、將div變成行級元素然後使用text-align:center來居中
css程式碼
.container{
background: gray;
/*
實現的方法就是將這個塊級元素變成行級元素,然後將這個行級元素裡面的內容居中
所以會顯示的居中
*/
display: inline;
text-align: center;
}
html程式碼
<div class="container">
<div>這個是一個沒有指定寬度的div,要讓它自動居中</div>
</div>
第三種方式 、集合float、position、left來完成
css程式碼
/*
第三種居中方式就是將父類元素定義成position: relative;float: left;left: 50%;
子類元素定義的一樣,只是將這裡的left: -50%;
*/
.three{
position: relative;
float: left;
left: 50%;
background: pink;
}
.threeCenter{
position: relative;
float: left;
left: -50%;
background: green;
}
html程式碼
第四種方式、使用position、left、top、translate來完成<div class="three"> <div class="threeCenter">這是第三種居中的方式</div> </div>
css程式碼
.four{
position: relative;
background: yellow;
left: 50%;
top: 50%;
}
.fourChild{
position: absolute;
transform: translate(-50%, -50%);
}
html程式碼
<!-- 第四種方式-->
<div class="four">
<div class="fourChild">第四種方式居中方式..</div>
</div>
效果如下: