zoukankan      html  css  js  c++  java
  • 水平居中和垂直居中

    水平居中方案

    1.行内元素,可以设置text-align属性

    text-align:center

    2.固定宽度块状元素,可以设置左右margin值为auto来使用

    margin:0 auto;

    3.不定宽度块状元素

    子元素设置 position:relative 和 left:50%

     

    垂直居中方案

    1.可以通过top、bottom、right、left等属性使它在文档中发生位置偏移(注意,relative是不会使元素脱离文档流的,absolute和fixed则会!

                position: relative;

                top: 50%; /*偏移*/

                margin-top: -150px;

     

    2.CSS3的transform属性也可以实现这个功能,通过设置div的transform: translateY(-50%),意思是使得div向上平移(translate)自身高度的一半(50%)

                position: relative;

                top: 50%; /*偏移*/

                transform: translateY(-50%);

     

    3.使用CSS3的弹性布局(flex)

                display: flex;

                align-items: center; /*定义body的元素垂直居中*/

                justify-content: center; /*定义body的里的元素水平居中*/

  • 相关阅读:
    关于<form>标签
    javaEE学习随笔
    类与接口
    java学习中的一些总结
    java 对象的创建
    jQuery选择器
    CSS学习随笔
    JDBC笔记 二
    Java EE笔记 (1) JDBC
    泛型笔记
  • 原文地址:https://www.cnblogs.com/absoluteli/p/7688561.html
Copyright © 2011-2022 走看看