Blogger Information
Blog 40
fans 0
comment 0
visits 37493
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex学习总结(4)项目居中——2019年9月10号20:00
虎子爸爸
Original
578 people have browsed it

常用居中类:flex-container-center

效果图——

flex-71.png

代码:

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>居中</title>
</head>

<body>
    <style>
        .flex-container-center {
            display: flex;
            display: -webkit-flex;
            width: 80%;
            height: 300px;
            border: 1px solid cadetblue;
        }
        
        .flex-container-center div {
            width: 50%;
            height: 100px;
            border: 1px solid cornflowerblue;
            margin: auto;
        }
    </style>
    <h5>项目在容器内绝对居中</h5>
    <div class="flex-container-center">
        <div>
            这是容器内的项目
        </div>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post