首页加一段垂直水平居中文字

加一段垂直水平居中文字

时间: 2023-06-22 13:48:41 浏览: 80

css 实现文字垂直居中

分两种情况： fix height：即垂直居中的元素高度已知，这个比较简单，也不需要额外的辅助元素。 <!DOCTYPE HTML> <html> <head> <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ /> <meta http-equiv=”cache-control” content=”no-cache” /> <style> <!– html, body { height: 100%; margin: 0; padding: 0; } body { position: relative;

可以通过 CSS 来实现垂直水平居中文字，可以将以下代码添加到 `<style>` 标签中： ``` .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 然后在 `<body>` 中添加一个 `<div>` 来包裹要居中的文字，例如： ``` <body background="bgImage.jpg" style="background-repeat:no-repeat;background-attachment:fixed; background-size:100% 100%; "> <div class="center"> <p>要居中的文字</p> </div> </body> ``` 其中，`position: absolute` 将该元素的定位方式设置为绝对定位；`top: 50%` 和 `left: 50%` 将该元素的左上角定位在页面的中心点；`transform: translate(-50%, -50%)` 将该元素向左上方移动自身宽度和高度的一半，从而实现垂直水平居中。

阅读全文