律师网站设计基础:CSS水平垂直居中对齐的方法

  • 2020-03-23
  • 3264

几种CSS水平垂直居中对齐的方法,包括文字及元素的居中方式,我们在律师网站设计时可能会用到。

文字的水平垂直居中

    text-align: center;
    line-height: 单前元素高度;

元素的水平垂直居中

1 使用绝对定位

   /* 需要固定宽高 */
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    width: xxx;
    height: xxx
    margin: auto;

2 使用绝对定位+ calc()

    /* 需要知道具体的元素宽高值 */
    position: absolute;
    width: xxx;
    height: xxx;
    top: calc(50% - xxx/2);
    left: calc(50% - xxx/2)

3. 使用绝对定位+transform

   /* 不需要知道元素的宽高 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

4. 使用display:flex;

    display: flex;
    justify-content: center;
    align-items: center;

相关阅读

律师网站设计中CSS文本阴影与元素阴影的运用

律师网站设计中如何使用css隐藏浏览器滚动条

律师网站设计基础,纯CSS3实现背景渐变等多种效果

css中实现文本两端对齐的方法

CSS基础,选取第一个、最后一个、偶数、奇数、第n个标签元素

成都律品科技有限公司专注律师互联网营销技术服务,创始人员2009年开始从事律师行业互联网技术开发、营销运营工作已十年,2018年公司正式成立,不断探索律师行业服务需求,致力于为律师行业提供透明、优质的服务,现已为全国多家律师事务所、律师团队提供互联网技术及营销支持。

在线咨询
  • 152-0832-9147

  • 105991110

全时在线,如未回复请留下联系方式

微信咨询