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

css中关于居中的问题

时间:2016-11-02 23:21:20      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:简单   size   情况   初学者   head   环境   class   idt   apple   

居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!!

html部分

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<div id="box">

<div id="son"> </div>

</div>

</body>

</html>

 

css部分

第一种(是个程序员就认识的):

<style type="text/css">

*{margin: 0;padding: 0;}

#box{

width: 200px;

height: 200px;

background: red;

}

#son{

width: 100px;

height: 100px;

background: green;

margin: 50px; /*算好尺寸设置(最蠢也是最简单的)*/

}

</style>

 

第二种:

<style type="text/css">

*{margin: 0;padding: 0;}

#box{

width: 200px;

height: 200px;

background: red;

position: relative;

}

#son{

width: 100px;

height: 100px;

background: green;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

}

</style>

第三种:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{margin: 0;padding: 0;}

#box{

float: left;

position: relative;

left: 50%;

}

p{

float: left;

position: relative;

right: 50%;

}

</style>

</head>

<body>

<div id="box">

<p>我是浮动的</p>

<p>我也是居中的</p>

</div>

</body>

</html>

 

以上几种是在工作中遇到的几种居中情况,欢迎大家补充!!!

 

 

 

 

css中关于居中的问题

标签:简单   size   情况   初学者   head   环境   class   idt   apple   

原文地址:http://www.cnblogs.com/sunweinan/p/6024697.html

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