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

HTML和CSS中的居中效果(1)

时间:2017-06-26 00:35:36      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:固定   tran   vertica   nsf   display   .com   inline   containe   mod   

单行上下左右居中

Html: 

<div class=”container”></div> 

CSS: 

.container{  

width: 600px; 

height: 300px; 

text-align: center; 

line-height: 300px; 

border: 1px solid green; 

固定高宽上下左右居中

Html: 

<div class=”container”><div class=”content”></div> </div> 

CSS: 

.container{ 

border: 1px solid green;  

width: 600px; 

height: 300px;

position: relative; 

.content{ 

background: black; 

height: 200px; 

width: 200px; 

position: absolute; 

left: 0; 

bottom: 0; 

right: 0; 

top: 0; 

margin: auto; 

}

不固定高宽上下左右居中(1)

Html: 

<div class=”container”><div class=”content”></div> </div> 

CSS: 

.container{ 

border: 1px solid green;  

width: 600px; 

height: 300px; 

line-height: 300px; 

text-align: center; 

.content{ 

display: inline-block; 

line-height: normal; 

vertical-align: middle; 

resize:both; 

overflow: auto; 

10 

CSS: 

.container{ 

width: 600px; 

height: 300px; 

text-align: center; 

.container:after/:before{ 

content:” ”;

display: inline-block; 

vertical-align: middle; 

height: 100%; 

.content{ 

display: inline-block; 

vertical-align: middle; 

resize:both; 

overflow: auto; 

不固定高宽上下左右居中(5)

Html: 

<div class=”container”>

<div class=”content”>

</div> 

</div> 

CSS: 

.container{ 

width: 600px; 

height: 300px; 

position: relative; 

border: 1px solid green; 

.content{ 

position: absolute; 

transform: translate(-50%,-50%); 

top: 50%; 

left: 50%; 

不固定高宽上下左右居中(6)

Html: 

<div class=”container”>

<div class=”temp”>

<div class=”content”>11 </div> 

</div> 

</div> 

CSS: 

.container{ 

width: 600px; 

height: 300px; 

border: 1px solid green; 

.temp{ 

width: 600px; 

height: 300px; 

transform: translateY(50%); 

}.temp{ 

float:left; 

transform: translate(-50%,-50%); 

margin-left: 50%; 

HTML和CSS中的居中效果(1)

标签:固定   tran   vertica   nsf   display   .com   inline   containe   mod   

原文地址:http://www.cnblogs.com/ct-5/p/7078532.html

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