Skip to content
Coding Wiki

Coding Wiki

Personal notes

  • Development
    • Front End
      • Aoda
      • Bootstrap
      • CSS
      • jQuery / JavaScript
      • Plugin Frontend Additions
      • ReactJS
    • Back End
      • ACF
      • Database
      • Laravel
      • Linux
      • PHP
      • WordPress Functions and Hooks
  • Processes
    • Creating a new project
  • Plugins
    • Internal
    • External
  • Tools
    • Desktop Setup
      • Compilers
      • Cross Browser Testing
      • Docker
      • PuTTY
      • WAMP
    • Domains and Emails
      • 1&1
      • GoDaddy
    • Source Control
      • Bitbucket
      • Git
      • HQ Deploy
      • SourceTree
    • Server Setup
      • Flywheel
      • Google Compute
    • Online
      • Google Analytics
  • Install new site on server
  • Home
  • / Archives

Tag: absolute

Posted on March 31, 2017January 29, 2022

Horizontally center an absolute positioned element inside a 100% width DIV

CategoriesCSS, Development, Front End

Use the element width:

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    left:50%;
    margin-left:-25px;
}

If you would like to not use calculations you can do this:

#logo {
  background:red;
  width:50px;
  height:50px;
  position:absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

Most Viewed

How to set state with dynamic key-value pair in React under Development , Front End , ReactJS

Set Up an SSH Key for SourceTree (Windows) under Desktop Setup , Source Control , SourceTree , Tools

Install AIMEOS Laravel project under Back End , Development , Laravel

Move repository from Bitbucket to GitHub with all branches and commits under Bitbucket , Git , Source Control , Tools

How to load SSH Keys to SourceTree under Source Control , SourceTree , Tools

GitHub Updater under External , Plugins

Edit old commit message under Git , Source Control , Tools

Create React Project under Development , Front End , ReactJS

Installing Gulp under Compilers , Desktop Setup , Tools

Creating a new project under Processes

Outdated IE banner under Development , Front End , jQuery / JavaScript

Animate elements if visible in viewport (page scroll) under Development , Front End , jQuery / JavaScript

Deploy a website to a remote server with Git push under Back End , Development , Git , Linux , Source Control , Tools

jQuery – detect click event on pseudo-element under Development , Front End , jQuery / JavaScript

Create JSX Project under Development , Front End , ReactJS

Adding Google Analytics 4 (GA4) Tracking to React App under Development , Front End , Google Analytics , Online , ReactJS , Tools

Automatically assign parent taxonomy terms to posts under Back End , Development , WordPress Functions and Hooks

Laravel Frontend under Back End , Development , Laravel

Create new Laravel project under Back End , Development , Laravel

Set up new project on HQ Deploy under HQ Deploy , Tools

Tags

  • backend
  • bootstrap
  • css
  • custom
  • divi
  • embed
  • equal height grid
  • fancybox
  • flexbox
  • font
  • git
  • homestead
  • IE
  • import
  • innerHeight
  • install
  • internet explorer
  • javascript
  • jquery
  • js
  • laravel
  • lightbox
  • link
  • local
  • login
  • mask
  • menu
  • modal
  • plugin
  • pseudo elements
  • resize
  • scroll
  • scrolling
  • scrollTop
  • setup
  • shortcode
  • style
  • text
  • video
  • vimeo
  • Visual Composer
  • website
  • windows
  • wordpress
  • youtube
Proudly powered by WordPress