2024年08月22日

CSS 居中布局方式一（cssli居中）

table + margin 实现水平方向居中, table-cell + vertical-algin 实现垂直居中

<!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>
<style>
#parent {
    width: 1000px;
    height: 600px;
    background: #ccc;
    /* <td> */
    display: table-cell;
    vertical-align: middle;
}
#child {
    width: 200px;
    height: 200px;
    background: #c9394a;
    /* <table> */
    display: block;
    margin: 0 auto;
}
</style>
</head>
<body>
<!-- 定义父级元素 -->
<div id="parent">
<!-- 定义子级元素 -->
<div id="child"></div>
</div>
</body>
</html>

2024年08月22日

自己总结下web移动端图片垂直居中的方法

1、移动端图片垂直居中

利用height与line-height相等：类似文字垂直居中的方法，这里图片就需要吧font-size设置为0；

这种在图片宽高不同的时候任然可以居中；

2024年08月22日

CSS之基于不同场景的垂直居中解决方案

大家好，今天要给大家分享的是CSS实现垂直居中的几种方法，相信大家对元素的水平居中都非常了解了，如果是一个行内元素，就对它的父元素应用 “text-align:center”；如果是一个块级元素，就对它自身应用“margin：auto”。但是要对一个元素进行垂直居中，你能想到哪些方法呢？下面我给大家介绍几种基于不同场景实现元素垂直居中的方法，希望能对你有所帮助。

2024年08月22日

CSS 垂直居中方式二（css垂直居中和水平居中怎么设置）

<div id="parent">
<!-- 定义子级元素 -->
<div id="child">居中布局</div>
</div>

2024年08月22日

Web 品质-国际化（webp质量）

网络无国界。

"With the Internet follows an absolute requirement to interchange data in a multiplicity of languages, which in turn utilize a bewildering number of characters."

2024年08月22日