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

學無先后，達者為師

網站首頁 編程語言 正文

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

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

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

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

??對于讓最外層組件鋪滿整個屏幕，這需要將其寬高均設置為 100%。不過這樣做了會導致瀏覽器出現水平和垂直的滑條。這是因為元素 body 會默認有一定的邊距 margin，一般為 8px，所以同時還要將元素 body 的邊距 margin 設為 0。

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

示例代碼如下：


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

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

            /* 下面 3 行代碼設置子元素橫豎均居中 */
            display: flex;
            /*display: -webkit-flex;*/
            /* 設置水平居中 */
            justify-content: center;
            /* 設置垂直居中 */
            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>

運行效果圖：

在這里插入圖片描述

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

欄目分類
最近更新