首页 > Web开发 > 详细

css实现元素水平、垂直居中

时间:2014-05-07 17:26:32      阅读:543      评论:0      收藏:0      [点我收藏+]

一、水平居中

  1、行内元素的水平居中方法

    给父元素设置一个text-align:centent。    

bubuko.com,布布扣
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box{
        text-align: center;
    }
</style>
<body>
<div class="box"></div>
</body>
</html>
bubuko.com,布布扣

 

  2、 确定宽度的块级元素水平居中  

    设置外边距,margin:0 auto;  

bubuko.com,布布扣
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box{
        width: 400px;
        height: 400px;
        background: red;
        margin: 0 auto;
    }
</style>
<body>
<div class="box"> </div>
</body>
</html>
bubuko.com,布布扣

 

    

  3、负外边距

    创建一个包含居中元素的容器,然后将其绝对定位于相对页面左边边缘50%的位置。这样,该容器的左外边距将从页面50%宽度的位置开始算起。然后,将容器的左外边距值设置为负的容器宽度的一半。这    样即可将该容器固定在页面水平方向的中点。

  

bubuko.com,布布扣
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box{
        width:400px;
        height:400px;
        background:red;
        position:absolute;
        left:50%;
        margin-left:-200px;
    }
</style>
<body>
<div class="box">
</div>
</body>
</html>
bubuko.com,布布扣

 

 

二、垂直居中

  1、使用line-height    

bubuko.com,布布扣
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
    <style>
        .box{
            background: red;
            line-height: 50px;
        }
    </style>
<body>
    <div class="box">Text here</div>
</body>
</html>
bubuko.com,布布扣

  2、margin

bubuko.com,布布扣
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
    <style>
        .box{
            background: red;
            width: 400px;
            height:400px;
        }
        .logo{
            width: 200px;
            height: 200px;
            margin-top: 100px;
        }
    </style>
<body>
    <div class="box">
        <img class="logo" src="images/logo.jpg" alt=""/>
    </div>
</body>
</html>
bubuko.com,布布扣

  3、vertical-align

bubuko.com,布布扣
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{
display:table;
}
.div {
display:table-cell;
vertical-align:middle;
background: red ;height: 100px
}
</style>
<body>
<div class="box">
<div class="div">
<p> vertical-align </p>
</div>
</div>
</body>
</html>
bubuko.com,布布扣

 

  4、position:absolute;

bubuko.com,布布扣
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background: red;
            position: relative;
        }
        .div{
            position:absolute;
            top:50%;
            width: 200px;
            height:200px;
            margin-top:-100px;
            background: green;
        }
    </style>
<body>
    <div class="box">
       <div class="div"></div>
    </div>
</body>
</html>
bubuko.com,布布扣

  5.position:absolute

bubuko.com,布布扣
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        height:240px;
        width:70%;
        background: red;
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>
bubuko.com,布布扣

 

  6、在 content 元素外插入一个 div

bubuko.com,布布扣
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box{
        height:50%;
        float:left;
        background: red;
        margin-bottom:-100px;
    }
    .div {
        clear:both;
        width: 200px;
        height:200px;
        background: green;
        position:relative;
    }
</style>
<body>
<div class="box"></div>
<div class="div"></div>
</body>
</html>
bubuko.com,布布扣

 

  7、padding

bubuko.com,布布扣
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box{
        padding: 20px;
        background: red;
    }
</style>
<body>
<div class="box"> padding </div>
</body>
</html>
bubuko.com,布布扣

 

css实现元素水平、垂直居中,布布扣,bubuko.com

css实现元素水平、垂直居中

原文:http://www.cnblogs.com/lybk/p/3712644.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!