日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

如何在 CSS 中設(shè)置組件在瀏覽器屏幕水平垂直居中

作者：暗諾星刻 更新時(shí)間： 2022-05-11 編程語言

如何在 CSS 中設(shè)置組件在瀏覽器屏幕水平垂直居中

??在 CSS 中設(shè)置組件在瀏覽器屏幕水平垂直居中可分解為兩個(gè)問題，一是設(shè)置組件在其父組件的水平垂直居中，二是讓其父組件鋪滿整個(gè)屏幕。

??對(duì)于讓最外層組件鋪滿整個(gè)屏幕，這需要將其寬高均設(shè)置為 100%。不過這樣做了會(huì)導(dǎo)致瀏覽器出現(xiàn)水平和垂直的滑條。這是因?yàn)樵?body 會(huì)默認(rèn)有一定的邊距 margin，一般為 8px，所以同時(shí)還要將元素 body 的邊距 margin 設(shè)為 0。

??對(duì)于讓組件在父組件中水平垂直居中，方法有很多，這里選擇 flex 布局。直接在父組件中設(shè)置 flex 布局和水平垂直居中即可。（注意：使用 flex 布局這種方法是在父組件中進(jìn)行設(shè)置。）

示例代碼如下：


<html>
<head>
    <meta charset="UTF-8">
    <title>title>
    <style type="text/css">
        body {
            /* 去掉邊距，這里為了去除鋪滿屏幕后瀏覽器橫豎兩邊的滑條 */
            margin: 0;
        }

        #outermost {
            /* 下面 3 行代碼設(shè)置涂滿整個(gè)屏幕 */
            height: 100%;
            width: 100%;
            position: absolute;

            /* 下面 3 行代碼設(shè)置子元素橫豎均居中 */
            display: flex;
            /*display: -webkit-flex;*/
            /* 設(shè)置水平居中 */
            justify-content: center;
            /* 設(shè)置垂直居中 */
            align-items: center;

            background: #00ff0d;
        }

        .item {
            width: 50px;
            height: 40px;
            border: 1px solid #00c1b1;
            background: #ffffff;
        }
    style>
head>
<body>
<div id="outermost">
    <div class="item">1div>
    <div class="item">2div>
    <div class="item">3div>
    <div class="item">4div>
    <div class="item">5div>
div>
body>
html>

運(yùn)行效果圖：

在這里插入圖片描述

原文鏈接：https://blog.csdn.net/wangpaiblog/article/details/123287960

欄目分類
最近更新