Fixing a div to the horizontal center of a page

Developer
Steve Pear
Size
1,984 Kb
Views
38,456
  1. Fixing a div to the horizontal center of a page Previews
  2. Fixing a div to the horizontal center of a page HTML Codes
  3. Fixing a div to the horizontal center of a page CSS Codes

How do I make an fixing a div to the horizontal center of a page?

This is an example from the blog article The complete guide to fixed divs at http://www.tipue.com/blog/fixed-divs/. What is a fixing a div to the horizontal center of a page? How do you make a fixing a div to the horizontal center of a page? This script and codes were developed by Steve Pear on 16 September 2022, Friday.

Fixing a div to the horizontal center of a page Previews
IQ Test

Fixing a div to the horizontal center of a page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fixing a div to the horizontal center of a page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="fixed-div"><h1>Fixed div</h1></div><div class="text">Nonummy quis dolore ut in facilisis ex veniam ut euismod consequat adipiscing wisi, elit euismod tation nonummy duis, exerci nisl te. Iriure qui feugiat iusto iriure exerci commodo illum, consequat dolor vel vel luptatum, amet et ullamcorper ad ut. Tincidunt feugait erat at tincidunt, odio molestie feugiat delenit illum ad ex, te eum dolore, nisl wisi. Blandit esse zzril dolor, erat sit diam vulputate adipiscing ex vulputate, ullamcorper. Ea suscipit, et, vel eros, et minim feugiat, esse aliquip autem ipsum commodo dignissim lorem, eros quis et duis iusto, augue, dolore eu diam et in. Duis nisl esse eum lobortis ea consequat duis luptatum aliquam quis.</div>
</body>
</html>

Fixing a div to the horizontal center of a page - Script Codes CSS Codes

body
{ height: 900px; font: 16px/1.6 "Open Sans", sans-serif;
}
h1
{ font: 18px/1.6 "Open Sans", sans-serif; color: #333;	text-transform: uppercase;	letter-spacing: 2px;
}
.text
{ padding: 10px 100px;
}
.fixed-div
{ position: fixed; top: 70px; right: 0; left: 0; margin: 0 auto; width: 120px; padding: 10px 30px; text-align: center; background-color: #fff; border: 1px solid #e2e2e2;
}
Fixing a div to the horizontal center of a page - Script Codes
Fixing a div to the horizontal center of a page - Script Codes
Home Page Home
Developer Steve Pear
Username Tipue
Uploaded September 16, 2022
Rating 3
Size 1,984 Kb
Views 38,456
Do you need developer help for Fixing a div to the horizontal center of a page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Steve Pear (Tipue) Script Codes
Name
Centering a div within a div, old-school
Flexbox, flexible footer
Backgrounds and the vh unit
Centering a div within a div with inline-block
Centering a div in a page, responsive
Backgrounds and the vw unit
Centering a div within a div, inner div responsive
An example of z-index and stacking order
Fixing a div to the horizontal and vertical center of the viewport
Flexbox, big third, third gone
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!