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

最新推荐文章于 2022-07-12 22:43:06 发布

原创最新推荐文章于 2022-07-12 22:43:06 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css居中对齐 #前端面试题

前端开发面试同时被 2 个专栏收录

6 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文介绍三种CSS居中方法：负边距对齐、margin:0 auto自动居中及数值计算法，通过实例演示如何使元素在父容器内水平居中。

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>