使用CSS实现上下左右居中

来源：互联网发布：淘宝购物哪个返利网好编辑：程序博客网时间：2024/05/22 12:01

1、左右居中

使用纯CSS实现左右居中的经典方法是将被居中元素的margin值左右设置为auto，如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>左右居中</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        .parent{            width: 80%;            height: 400px;/*固定高度只为结果直观，高度可自动*/            margin: 0 auto;/*父元素相对于浏览器窗口左右居中*/            background: #DEC2C2;        }        .child{            width: 200px;            height: 400px;            margin: 0 auto;/*子元素相对于父元素左右居中*/            background: #65AC6B;        }    </style></head><body>    <div class="parent">        <div class="child">            左右居中        </div>    </div></body></html>

结果如图：

这里写图片描述

2、上下左右居中

（1）被居中元素宽高已知

只要使得父元素相对定位，子元素绝对定位，子元素的top和left都为50%，margin-top和margin-left分别为宽高的负一半即可。

<!--上下左右居中--><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>DIV上下左右居中</title>    <style type="text/css">            *{/*实现div的上下左右居中*/                margin: 0;                padding: 0;            }/*清除格式*/            .div0{                height: 1000px;                width: 800px;                position: relative;/*父元素相对定位*/                background: #678680;            }            .div1{                position: absolute;/*子元素绝对定位*/                height: 240px;                width: 300px;                /*overflow: hidden;*//*可使得多出块元素的文本隐藏*/                top: 50%;                left: 50%;                margin-top: -120px;/*高的一半*/                margin-left: -150px;/*宽的一半*/                border: 5px solid #E58B8B;                text-align: center;            }            .div1 p{                font-size: 36px;            }    </style></head><body>    <div class="div0">        <div class="div1">            <p>hello world!</p>            <p>hello world!</p>        </div>    </div></body></html>

（2）被居中元素宽高未知

<!--上下左右居中--><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>上下左右居中</title>    <style type="text/css">            *{/*实现div的上下左右居中*/                margin: 0;                padding: 0;            }/*清除格式*/            .div0{                height: 500px;                width: 500px;                position: relative;/*父元素相对定位*/                background: #678680;            }            .div1{/*被居中元素宽高未知*/                position: absolute;/*子元素绝对定位*/                top: 100px;                bottom: 100px;                left: 200px;                right: 200px;/*设置上下左右撑开以居中*/                background: #E3A5A5;                text-align: center;            }    </style></head><body>    <div class="div0">        <div class="div1">        </div>    </div></body></html>

结果如下：

这里写图片描述

阅读全文

0 0