如何水平居中元素

来源：互联网发布：seo关键词优化编辑：程序博客网时间：2024/05/16 10:45

如果需要居中的元素为常规流中inline元素，为父元素设置text-align: center;即可实现

如果需要居中的元素为常规流中block元素，1）为元素设置宽度，2）设置左右margin为auto。3）IE6下需在父元素上设置text-align: center;,再给子元素恢复需要的值

<body>    <div class="content">    aaaaaa aaaaaa a a a a a a a a    </div></body><style>    body {        background: #DDD;        text-align: center; /* 3 */    }    .content {        width: 500px;      /* 1 */        text-align: left;  /* 3 */        margin: 0 auto;    /* 2 */        background: purple;    }</style>

如果需要居中的元素为浮动元素，1）为元素设置宽度，2）position: relative;，3）浮动方向偏移量（left或者right）设置为50%，4）浮动方向上的margin设置为元素宽度一半乘以-1

<body>    <div class="content">    aaaaaa aaaaaa a a a a a a a a    </div></body><style>    body {        background: #DDD;    }    .content {        width: 500px;         /* 1 */        float: left;        position: relative;   /* 2 */        left: 50%;            /* 3 */        margin-left: -250px;  /* 4 */        background-color: purple;    }</style>

如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为50%，3）偏移方向外边距设置为元素宽度一半乘以-1

<body>    <div class="content">    aaaaaa aaaaaa a a a a a a a a    </div></body><style>    body {        background: #DDD;        position: relative;    }    .content {        width: 800px;        position: absolute;        left: 50%;        margin-left: -400px;        background-color: purple;    }</style>

如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为0,3）设置左右外边距都为auto

<body>    <div class="content">    aaaaaa aaaaaa a a a a a a a a    </div></body><style>    body {        background: #DDD;        position: relative;    }    .content {        width: 800px;        position: absolute;        margin: 0 auto;        left: 0;        right: 0;        background-color: purple;    }</style>

0 0