zoukankan      html  css  js  c++  java
  • css水平居中 和 垂直居中【学习笔记】

    一、水平居中 
    方法一:

      通过给父元素添加display: flex;   justify-content: center;使其水平居中。

    方法二:

      通过给元素添加margin: 0 auto;使其水平居中。

    方法三:

      通过给父元素添加position:relative;

      子元素添加position: absolute;  left: 50%;  transform: translateX(-50%);使其水平居中。

    方法四:  

      通过给元素添加position:relative;  left: 50%;  transform: translateX(-50%);使其水平居中。

    方法五:

      通过给父元素添加position:fixed;

      子元素添加position: absolute; top:0;  left: 0; bottom: 0; right: 0; margin:0 auto;使其水平居中。

    二、垂直居中

    方法一:

       通过给父元素添加display: flex;  align-items: center;使其垂直居中。

    方法二:

      通过给父元素添加display: flex;

      子元素添加align-self: center使其垂直居中。

    方法三:

      通过给父元素添加position:relative;

      子元素添加position: absolute; top: 50%;  transform: translateY(-50%);使其垂直居中。

    方法四:

      通过给元素添加position:relative; top: 50%;  transform: translateY(-50%);使其垂直居中。

    方法五:

      通过给父元素添加position:fixed;

      子元素添加position: absolute; top:0; left: 0; bottom: 0; right: 0; margin: auto 0;使其垂直居中。

  • 相关阅读:
    ES6对象的扩展
    ES6函数的扩展
    ES6新增变量
    ES6框架的搭建
    自适应布局 左右结构、上下结构
    iframe 子页面改变父页面样式
    检测终端类型
    $.grep()
    点击元素内部不隐藏,点击元素外部元素隐藏
    angular表单验证
  • 原文地址:https://www.cnblogs.com/start-bigin/p/11544137.html
Copyright © 2011-2022 走看看