【CSS】CSS几种居中及实现过程

来源：互联网发布：化工制药知乎编辑：程序博客网时间：2024/06/06 04:06

CSS的居中有很多种。主要分为垂直和水平两个方向。大部分方法是通用，因为height的margin设为auto会将上下边距自动设为0，因此会在某些具体的方法上略有区别。本文将居中的实现方法，测试一下，并截图出表现效果。

Html代码：

<body>        <div id="wrap">            <div class="father">                父元素                <div class="center">                    居中元素                </div>                父元素            </div>        </div>    </body>

对齐方式：

1。负边距对齐：这个方法利用定位将中间基准线与父元素左边框重合，子元素(居中元素)再左外边距边框离中间准线50%达到居中目的。

.father{                background: lightpink;                border:solid pink 1px;                position: relative;                left:50%;                height: 100px;                width:500px            }            .center{                background: red;                border:dashed green 1px;                height: 40px;                width:100%;/*width 一定要是100% ，不能使用具体宽度。父元素*/                position: relative;/*负边距方法：relative 父元素不塌陷                                                absulate 父元素塌陷*/                left: -50%;/*与父元素的宽度做比例*/            }

效果如图：
负边距对齐

2。”margin : 0 auto” 方法，该方法利用 margin:auto 的特性，在浏览器渲染过程中将左右边距自动计算为剩余空间的一半，达到居中的目的。

        <style >            /**{border:solid 1px;}*/            #wrap{                position: relative;            }            .father{                background: lightpink;                border:solid pink 1px;                position: relative;                height: 100px;                width:500px            }            .center{                background: red;                border:dashed green 1px;                height: 40px;                width:60%;                margin:0 auto;            }        </style>

效果如下：

这里写图片描述

3。数值计算法：在父元素与子元素的宽度都是已知的情况下，可以通过计算获得居中效果。如题中，假设居中元素宽为 60px 。则left = ( father.width - center.width )/2 = 220px。不需要考虑边框的原因，因为border属性是以左边为基准线计算。

<style >            /**{border:solid 1px;}*/            #wrap{                position: relative;            }            .father{                background: lightpink;                border:solid green 50px;                height: 100px;                width:500px;                                position: relative;                     }            .center{                background: red;                border:dashed green 15px;                height: 40px;                width:60px;                position: relative;                left:219px;            }        </style>

效果如下：
这里写图片描述
为了更加明显地表示出边框宽度对其没有影响，使用加宽的绿色来标记father 和 center 的边框。

阅读全文

0 0