前言
css水平垂直居中一直是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（特想找个地洞钻进去）。现在都2022年了，这些技巧现在已经不是技巧了吧，只是好记性不如烂笔头，还是乖乖记下来吧，得把它玩透才行！
注：文中例子没写明html代码时，使用的是下面结构：
2025年07月10日
css水平垂直居中一直是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（特想找个地洞钻进去）。现在都2022年了，这些技巧现在已经不是技巧了吧，只是好记性不如烂笔头，还是乖乖记下来吧，得把它玩透才行！
注：文中例子没写明html代码时，使用的是下面结构：
2025年07月10日
<div><div class="rich_media_content " id="js_content"> <section data-role="outer" label="Powered by 135editor.com"><section data-role="outer" label="Powered by 135editor.com"><p style="font-size: 16px;white-space: normal;list-style-type: none;-webkit-padding-start: 0px;-webkit-margin-before: 0px;-webkit-margin-after: 0px;max-width: 100%;min-height: 1em;color: rgb(62, 62, 62);font-family: 微软雅黑;"><strong style="max-width: 100%;color: rgb(255, 0, 0);font-size: 15px;line-height: 25.6px;"><img class="" data-ratio="0.1362179487179487" data-src="
2025年07月10日
在前端工作中用input做一个按钮，文本输入框禁之类东西，由于浏览器的兼容性问题，让前端人员头疼不已，那如何解决，本文章以下部分介绍：
input标签在各浏览器里默认高度和宽度：
当input标签在type为text时，在Firefox和Safari中的默认高度为22像素（包括上下边框）宽度为146像素（包括左右边框），而在IE中的默认高度为24像素，而宽度却和Firefox和Safari是一致的，也是146像素。
2025年07月10日
在出里文字比较多的网页，文字对齐其中采用的两端对齐，两端对齐的方法有三种方法，如下：
1. 使用text-align:justify
text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用
/*
说明：
1.IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合，text-align-last 要生效，必须先定义text-align 为justify
2025年07月10日
通常代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.text {
background-color: grey;
}
</style>
</head>
<body>
<img src="warn.png"><span class="text">some text.</span>
</body>
</html>