zoukankan      html  css  js  c++  java
  • 怎么让一个块级元素居中

    1.在css中让块级元素居中的方法有很多种,我先记录第一种方法,具体步骤如下:

    (1)给父元素添加绝对定位relative,如果不添加定位,那么块级子元素会在body中垂直居中

    position: relative;

    (2)给子元素添加相对定位absolute,并且让子元素距离父元素左边和顶部50%的距离,令left:50%;top:50%,此时子元素在父元素的位置是偏右下的

    position: absolute;
    left: 50%;
    top: 50%;

    (3)在子元素中添加css3中的transform属性让子元素分别向上和向左移动半个子元素的宽度transform:translate(-15,-10)

    transform: translate(-15px,-10px);

     2.用margin:auto

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>怎么让块级元素居中</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #ff0;
            position: relative;
        }
        .cbox{
            width: 50px;
            height: 50px;        
            background-color: #f00;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    </head>
    <body>
        <div class="box">
            <div class="cbox"></div>
        </div>
    </body>
    </html>
  • 相关阅读:
    读REDIS数据结构
    一致性哈希虚节点解决雪崩问题
    TCP的建立和关闭
    nginx和apache的比较
    进程和线程的区别
    acm过河卒
    搭建centos7 的php环境
    navicat 中 oracle数据传输到mysql上
    安装虚拟机精简版centos7
    整合tomcat的一些配置
  • 原文地址:https://www.cnblogs.com/yaomeijuan/p/8777904.html
Copyright © 2011-2022 走看看