일반적인 CSS 센터링 토론

아래 그림과 텍스트를 중앙에 배치하는 일반적인 경우부터 시작하겠습니다.

먼저 img가 인라인이라는 점을 고려하여 왼쪽 및 오른쪽 중앙 정렬을 처리합니다. element 의 경우 아래 텍스트 콘텐츠도 인라인 요소이므로 text-align을 사용하세요.

<style>
    .container{
        text-align: center;
    }</style><p>
    <img  alt="일반적인 CSS 센터링 토론" >
    </p><p>火星</p>

실제 효과는 다음과 같습니다.

Mars

이것의 문제는 가장 바깥쪽 컨테이너에 직접 text-align 속성을 설정하면 모든 하위 요소가 이를 상속하게 된다는 것입니다. 그림 제목 아래에 텍스트 설명이 있으면 아래와 같이 텍스트 설명도 중앙에 배치됩니다.

화성

화성은 태양계 8번째 행성 하나, 천문 기호는 ♂

인데 사실 텍스트 설명을 왼쪽으로 정렬하길 원하기 때문에 텍스트에 text-align:left 속성을 추가해야 합니다. 설명, 상위 요소의 속성을 재정의하고 더 많은 하위 요소가 있는 경우에도 이 작업을 수행해야 합니다. 속성 자체를 재정의하는 것은 좋지 않으므로 여기서는 다른 방법이 사용됩니다. 표시된 이미지가 변경되고 너비와 높이가 가변적이므로 일반적으로 너비와 높이가 이미지에 명시적으로 설정됩니다. 너비를 알고 있는 경우 margin:0 auto 방법을 사용할 수 있습니다. 왼쪽 및 오른쪽 여백 값을 자동으로 설정하면 브라우저는 자동으로 왼쪽 및 오른쪽 여백 값을 나머지 너비의 절반으로 설정합니다. 컨테이너:

화성

화성은 태양계의 8개 행성 중 하나입니다. 천문학 기호는 ♂입니다.

코드는 다음과 같습니다.

<style>
    figure{
        width: 100px;
        margin: 0 auto;
    }
    figcaption{
        text-align: center;
    }</style>
    <p>
        <figure>
            <img  alt="일반적인 CSS 센터링 토론" >
            <figcaption>火星</figcaption>
        </figure>
        </p><p>火星（Mars）是太阳系八大行星之一，天文符号是♂</p>
    

이 방법은 상단 및 하단 센터링에는 적용되지 않습니다.

Use margin: 0 auto는 가장 일반적인 왼쪽 및 오른쪽 센터링 방법이라고 할 수 있으며, 블록 요소뿐만 아니라 인라인 요소에도 적합합니다. 많은 웹페이지의 레이아웃은 주요 콘텐츠가 고정된 너비를 갖고 중앙에 표시되는 것입니다. 예를 들어 Taobao PC:

가장 바깥쪽의 스타일을 살펴보겠습니다. 컨테이너에서 margin: 0이 사용되는 것을 볼 수 있습니다. auto:

다음으로 수직 센터링에 대해 논의하겠습니다. 문제는 수직 센터링입니다. 그러나 보다 일반적인 수직 센터링 방법이 있는데, 그것은 테이블-셀의 수직 센터링을 이용하는 것이다. 방법은 상위 컨테이너에 다음 속성을 추가하는 것입니다.

.container{ 
    display: table-cell;
    vertical-align: middle;
}

효과는 다음과 같습니다.

Mars

table-cell 사용의 단점은 margin이 적용되지 않기 때문에 컨테이너의 magin 속성이 유효하지 않다는 점입니다. 테이블 레이아웃에. 따라서 컨테이너를 중앙에 배치하려면 margin: 0 auto를 사용하면 작동하지 않습니다. 해결책은 컨테이너의 외부 레이어에 다른 컨테이너를 추가한 다음 컨테이너가 블록 여백: 0 자동으로 표시되도록 하는 것입니다.

또 다른 단점은 테이블 셀 요소의 너비와 높이를 백분율로 설정하면 작동하지 않는다는 것입니다. 일반적인 시나리오는 너비를 외부 컨테이너 너비의 100%로 설정하는 것입니다. 컨테이너를 변경하려면 너비를 3000px와 같이 큰 값으로 설정하여 100%를 달성하세요. 또 다른 문제는 IE6/7과 호환되지 않는다는 점인데, 이제 프로덕션 환경은 기본적으로 IE6/7과 호환될 필요가 없습니다.

컨테이너가 위치를 절대값으로 설정해야 하는 경우 이 방법이 실패할 수 있습니다. position:absolute를 설정하면 (flex가 아닌) 요소의 표시가 강제로 차단되기 때문입니다. 해결 방법은 위를 모방하고 외부 레이어에 다른 컨테이너를 추가한 다음 이 컨테이너에 절대값을 적용하는 것입니다. 부작용은 내부 컨테이너의 높이와 너비를 백분율로 설정하면 실패한다는 것입니다(해당 위치도 절대값으로 설정되지 않은 경우). ). 이러한 이유로 표시를 사용할 수 없는 상황이 있습니다: 테이블-셀 수직 센터링.

      这种场景就是需要在页面弹个框，这个框的位置需要在当前屏幕左右上下居中:

      通常需要将这个框的positiion设置成absolute，这个时候table-cell就不能发挥作用了，即使你在外面再套多两层，最外层为absolute，里层为table-cell，但由于里层无法设置height为外层的100%，也就是说高度无法刚好占满整个屏幕，所以不能起作用。

      解决办法是使用relative定位，设置top为50%，再设置margin-top为元素高度的负的一半。一开始设置top 50%，将弹框的起始位置放到页面中间，然后再设置margin-top为弹框高度的一半取负，这样使得弹框在页面中间位置再往上移一半自身的高度，这样就刚好在正中间了，左右居中也可类似处理：

<style> 
    .mask{
        position: absolute; width: 100%; height: 100%;
    }
   .outer{
        position: relative;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }
    .container{
        width: 200px;
        height: 200px;
        display: table-cell;
        vertical-align: middle;
    }</style><p>
    </p><p>
        </p><p>

        </p>
    

效果如下：

火星

       这种办法的缺点是需要知道高度，无法根据内容长短自适应。所以就有了transform的方法，将margin-top一个具体的负值改成transform: translate(0, -50%)，由于translate里面的面百分比是根据元素本身的高度计算的，于是就可以达到自适应的效果。将上面outer样式改为：

   .outer{
        position: relative;
        top: 50%;
        left: 50%;
width: 200px;
        transform: translate(-50%, -50%);
    }

      这个办法十分地方便，为了提高兼容性，需要添加-ms-和-webkit-前缀，缺点是IE8不支持。

      上面的两种办法：margin-top一个负值和translate -50%都有一个潜在的弊端， 就是如果设置left为50%是借助position为absolute的话，可能会导致换行：

<style>
    .container{
        position: relative;
    }
     .nav{
        position:absolute;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 0;
     }</style><p>
    <figure>    
        <img  alt="일반적인 CSS 센터링 토론" >
    </figure>   
    </p><p><span>地形</span><span>气候</span><span>运动</span></p> 

      效果如下：

地形气候运动

 

      可以看到，本来应该在一行显示的p元素却换行了，这是因为在一个relative元素里面absolute定位的子元素会尽可能地不超过容器的边界，通过把行内元素换行的方式。由于设置left为50%，导致p元素超了边界，所以就换行了，即使再translate -50%但已经晚了。即使是交换下两者的位置也是一样的效果，看得出浏览器执行的顺序始终是以absolute的定位优先。所以这种方法还是有不适合的场景，主要是用于左右居中定位为absolute的的情况。

      另外一个CSS3居中的办法是使用flex布局，flex布局居中十分容易和方便，只需要在父容器添加三行代码，例如上面的居中情况，可将.nav的样式改为：

    .nav{
        position:absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

      效果如下：

地形气候运动

       flex布局在自适应领域的功能真的是非常强大，不过IE的兼容性不好，所以说可能的话，不要太去照顾IE了。

 

      上面讨论的都是一些复合元素的居中，接下来分析单纯的行内元素的垂直居中。

      主要是要借助vertical-align: middle。如下，有一张图片和文字：

    <p>
        <img  alt="일반적인 CSS 센터링 토론" >
        <span>photo</span>
    </p>

      如果不做任何处理，那么默认的垂直居中是以baseline为基准：

photo

      为了让它们能够垂直居中，需要改变它们的居中方式：

        .container img,
        .container span{
            vertical-align: middle;
        }

      注意每个元素都需要设置，效果：

photo

       如果container的高度比图片还要高：

photo

 

      为了让中间的内容能够在container里上下居中，可以设置文字的line-height为container的高度，那么文字就上下居中了，由于照片是和文字是垂直居中的，所以照片在container里也上下居中了，代码：

        .container span{
            vertical-align: middle;
            line-height: 150px;
        }

      效果：

photo

       这也就给了一个启示，如果需要垂直居中一个p里的比p高度小的照片，可以添加一个元素，让它的line-height等于p的高度，如下：

<style>
        .container{
            width: 150px;
            height: 150px;
            text-align: center;
        }
       .container img{
            vertical-align: middle;
        }
        .container:before{
            content: "";
            vertical-align: middle; 
            line-height: 150px;
        }</style><p>
        <img  alt="일반적인 CSS 센터링 토론" ></p>

      或者是弄一个inline-block的元素，设置height为100%，这种的兼容性更好：

        .container:before{
            content: "";
            display: inline-block;
            vertical-align: middle; 
            height: 100%;
        }

     上下居中效果：

 

       还有另外一种方法借助absolute定位和margin: auto：

        .container{
            position: relative;
        }
       
        .container img{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

      这个方法的神奇之处在于最后的margin: auto，这种方法也适用于p，但是需要给p显式指定一个height，不然p的height会达到外层容器的100%。

      如果图片比container大，这种方法就不适用了。因为有一种比较常见的场景是：照片有一边和container一样高，另外一边按照片的比例缩放，照片居中显示，超出的截断，这种应该叫“占满”（occupy）布局。这种情况，只需要把left/right/top/bottom/设成一个很大的负值即可：

        .container img{
            position: absolute;
            left: -9999px;
            top: -9999px;
            right: -9999px;
            bottom: -9999px;
            margin: auto;
        }
        .container{
            overflow: hidden;
        }

      效果：

      综合上面的讨论，左右居中常用text-align和margin: 0 auto，上下居中一种办法是借助table-cell，另外一种是设置top: 50%和margin-top/translate(0, -50%)结合的办法，还有就是使用flex布局，对于行内元素设置vertical-align: middle，同时借助一个高度为100%的元素达到垂直居中的效果。最后是position: absolute和margin: auto结合使用的办法。可以说没有一个方法可以100%适用，可以根据不同的情况合理结合使用。

      如果上文有不妥的地方，或者读者有其它的居中方式，还请指出

更多일반적인 CSS 센터링 토론相关文章请关注PHP中文网！